Bug 185683 - Image-rendering: pixelated; fails on scaled canvases
Summary: Image-rendering: pixelated; fails on scaled canvases
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on: 27684
Blocks:
  Show dependency tree / graph
 
Reported: 2018-05-16 09:54 PDT by Jake Archibald
Modified: 2021-09-01 01:14 PDT (History)
3 users (show)

See Also:

Attachments
Screenshot on 1x screen. (57.85 KB, image/png)
2018-05-17 01:38 PDT, Jake Archibald 		no flags Details
Screenshot on retina screen (124.17 KB, image/png)
2018-05-17 01:39 PDT, Jake Archibald 		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 Jake Archibald 2018-05-16 09:54:51 PDT 
https://pixelated-transform-demo.glitch.me/

These are all canvases & imgs displayed at 10x using different methods, all with pixelated image-rendering. Some have a null clip-path applied. The output of each should look the same.

The canvases lose their sharpness when scaled using a CSS transform (on either the canvas element itself, or a parent element).
Comment 1 Jake Archibald 2018-05-17 01:38:52 PDT 
Created attachment 340563 [details]
Screenshot on 1x screen.

The bug is much more noticeable on a 1x screen.
Comment 2 Jake Archibald 2018-05-17 01:39:20 PDT 
Created attachment 340564 [details]
Screenshot on retina screen
Comment 3 Kimmo Kinnunen 2021-09-01 01:14:35 PDT 
I think what's left today is the ones that depend on transformed elements respecting image-rendering. That work should be bug 27684