Open Radar

 
Summary:
The standard technique for rendering a WebGL context in Retina resolution is to set the CSS style for the canvas element to the 1x resolution while setting the direct dimensions of the context to the 2x dimensions. In Chrome, Firefox, and iOS 8 Safari, this technique works perfectly. In Safari and Webkit on OS X Yosemite, this causes some sort of image interpolation which blurs sharp lines.

Steps to Reproduce:
Easy version:
1. Download the attached HTML file.
2. Open the HTML file in Safari 8 on OS X Yosemite on a HiDPI display.
3. Open the HTML file in Chrome on OS X Yosemite on a HiDPI display.
4. Compare the two left boxes. These are 2D canvases. They should be sharp in both browsers.
5. Compare the two right boxes. These are WebGL canvases. The Chrome one appears sharp, but the Safari one is slightly blurred.

Harder version:
1. Create an HTML file.
2. Write WebGL code, using the standard scaling technique to support HiDPI rendering.
3. Open the HTML file in Safari 8 on OS X Yosemite on a HiDPI display.
4. Open the HTML file in Chrome on OS X Yosemite on a HiDPI display.

Expected Results:
The images rendered in Safari should be sharp and should match those provided by Chrome.

Actual Results:
The WebGL canvas element provided by Safari is blurred on a HiDPI display and doesn't match Chrome's sharp image.

Version:
Safari 8.0 (10538.46) 

Notes:
In the included HTML file, a 2D canvas is provided alongside the 3D WebGL canvas. This is to illustrate that the blurriness on the WebGL canvas is unique to it, as the 2D canvas gets scaled down correctly and appears sharp.

Configuration:
OS X 10.10 Developer Preview 4 (14A298i), MacBook Pro (Retina, 15-inch, Late 2013), Intel Iris Pro + NVIDIA GeForce GT 750m GPU, 16 GB RAM, 500 GB SSD

Open Radar Note:
The attached HTML file is also available here:
http://drewfitz-public.s3.amazonaws.com/WebGL-Bug-Radar/canvas-scaling-test.html