RESOLVED DUPLICATE of bug 193895 138293
WebGL Canvases are blurry when scaled up using CSS and -webkit-optimize-contrast 
https://bugs.webkit.org/show_bug.cgi?id=138293
Summary WebGL Canvases are blurry when scaled up using CSS and -webkit-optimize-contrast
Joseph Huckaby
Reported 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.
Attachments
WebGL canvas scaled with CSS, on Safari, Chrome and Firefox (543.26 KB, image/png)
2014-11-02 10:35 PST, Joseph Huckaby 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Joseph Huckaby
Comment 1 2014-12-25 15:25:42 PST
This bug is fixed in Chrome 41: https://code.google.com/p/chromium/issues/detail?id=429531
Gregg Tavares
Comment 2 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
Kimmo Kinnunen
Comment 3 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 ***
Note You need to log in before you can comment on or make changes to this bug.