Bug 138293 - WebGL Canvases are blurry when scaled up using CSS and -webkit-optimize-contrast
Summary: WebGL Canvases are blurry when scaled up using CSS and -webkit-optimize-contrast
Status: RESOLVED DUPLICATE of bug 193895
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-11-02 10:35 PST by Joseph Huckaby
Modified: 2021-09-01 01:41 PDT (History)
5 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 ***