Bug 138291

Summary: WebGL Canvas is blurry with graphics at 1X scale (HiDPI screens)
Product: WebKit Reporter: Joseph Huckaby <jhuckaby>
Component: WebGLAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: dino, jonlee, kkinnunen
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: Unspecified   
Description Flags
Safari vs. Firefox comparison of blurry HiDPI WebGL 2D canvas at 1X none

Description Joseph Huckaby 2014-11-02 09:06:32 PST
Created attachment 240811 [details]
Safari vs. Firefox comparison of blurry HiDPI WebGL 2D canvas at 1X

WebGL canvases with 1X pixel graphics are blurry on HiDPI screens.  It appears that the final rendered pixels are blended with each other, despite having my canvas set with "image-rendering:-webkit-optimize-contrast;" (and all the vendor prefix variants of it).  Demo:


The canvas in the demo uses WebGL to display a simple 2D checkerboard pattern (every other pixel is black/white).  This is rendered at 1X size.  Safari is rendering the final pixels halfway blended with their neighbors.

Zoom in using accessibility to see what is actually happening.  I have also attached a screenshot which showcases the problem versus Firefox, where the pixels are crisp and clean.  Zoom in on the screenshot to see the comparison of how Safari renders the WebGL canvas vs. how Firefox does it.

I believe the desired behavior is for the pixels to be crisp and sharp, especially with "image-rendering: -webkit-optimize-contrast;" and friends set.
Comment 1 Joseph Huckaby 2014-11-02 09:07:21 PST
I tried to select OS X 10.10 in the menu, but it was not listed.
Comment 2 Joseph Huckaby 2014-12-25 15:13:48 PST
FYI, this bug is now fixed in Chrome Canary 41.  https://code.google.com/p/chromium/issues/detail?id=424025
Comment 3 Kimmo Kinnunen 2021-09-01 01:08:44 PDT
Thanks for the report. Marking this as duplicate of bug 193895 since it appears to target the same use-case.

*** This bug has been marked as a duplicate of bug 193895 ***