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

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.