Bug 138293

Summary: WebGL Canvases are blurry when scaled up using CSS and -webkit-optimize-contrast
Product: WebKit Reporter: Joseph Huckaby <jhuckaby>
Component: WebGLAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: bowlofnoodles, dino, gman, jonlee, kkinnunen
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: Unspecified   
Attachments:
Description Flags
WebGL canvas scaled with CSS, on Safari, Chrome and Firefox none

Description Joseph Huckaby 2014-11-02 10:35:36 PST 
Created attachment 240815 [details]
WebGL canvas scaled with CSS, on Safari, Chrome and Firefox

WebGL canvases seem to ignore the CSS "image-rendering:-webkit-optimize-contrast;" rule, and always render blurry when scaled up.  Here is a demo:

http://bowser.effectgames.com/joe/bugs/webgl/webgl-bug-scaled-blurry.html

This page displays how I would expect it to in Firefox -- all the pixels are crisp as they should be.  Chrome seems to have the same issue as Safari.  See screenshot for a comparison of all three browsers.
Comment 1 Joseph Huckaby 2014-12-25 15:25:42 PST 
This bug is fixed in Chrome 41: https://code.google.com/p/chromium/issues/detail?id=429531
Comment 2 Gregg Tavares 2019-01-27 22:18:42 PST 
optimize-contrast is deprecated and is not part of the spec

https://drafts.csswg.org/css-images-3/#the-image-rendering

Maybe you want support for crisp-edges and/or pixelated

https://bugs.webkit.org/show_bug.cgi?id=193895
Comment 3 Kimmo Kinnunen 2021-09-01 01:41:15 PDT 
Thanks for the report! Should be fixed when fixing bug 193895

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