NEW 230222
image-rendering:pixelated is broken by position:fixed 
https://bugs.webkit.org/show_bug.cgi?id=230222
Summary image-rendering:pixelated is broken by position:fixed
Pierre Carrier
Reported 2021-09-13 09:55:42 PDT
Reproduced with Safari 15 on Monterey 12.0 Beta (21A5304g) and WebKit r282325. For example, the QR code on the right is blurry @ https://pcarrier.com/toys/safari.html reproduced here: <!DOCTYPE html> <html> <body style="margin:0;padding:0"> <img src="data:image/webp;base64,UklGRoQAAABXRUJQVlA4THgAAAAvHAAHAA/wkf+P/H/kf/7jAU5s21qWH3fXdF+lfcMgU/lngtZfMpaoVmma/ev/JHCX12AKEf0PZqbfkawdO/UFYZkQfhNiYGA3fiLSs4O7X5IFSfXMleTigPk6TlTOg6UHkVyHdkOdRHEGUWqQsFTszBEimiRm/gM" style="image-rendering:pixelated;height:200px;width:200px;position:fixed;right:0"/> <img src="data:image/webp;base64,UklGRoQAAABXRUJQVlA4THgAAAAvHAAHAA/wkf+P/H/kf/7jAU5s21qWH3fXdF+lfcMgU/lngtZfMpaoVmma/ev/JHCX12AKEf0PZqbfkawdO/UFYZkQfhNiYGA3fiLSs4O7X5IFSfXMleTigPk6TlTOg6UHkVyHdkOdRHEGUWqQsFTszBEimiRm/gM" style="image-rendering:pixelated;height:200px;width:200px"/> </body> </html>
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2021-09-13 13:27:50 PDT
This is because we put the image into a composited layer when fixed, so it doesn't get painted and therefore doesn't get pixelated. You could work around this by adding border style to the image (even a transparent border).
Pierre Carrier
Comment 2 2021-09-13 17:53:57 PDT
The original occurence, on https://pcarrier.com, was an img which did have a border-radius but no border; not that it matters to this issue, but I solved by wrapping in a div like so: <div style="position:fixed;right:0;top:0"> <img src="data:image/webp;base64,UklGRoQAAABXRUJQVlA4THgAAAAvHAAHAA/wkf+P/H/kf/7jAU5s21qWH3fXdF+lfcMgU/lngtZfMpaoVmma/ev/JHCX12AKEf0PZqbfkawdO/UFYZkQfhNiYGA3fiLSs4O7X5IFSfXMleTigPk6TlTOg6UHkVyHdkOdRHEGUWqQsFTszBEimiRm/gM" style="image-rendering:pixelated;z-index:1;height:8vw;width:8vw;border-radius:0 0 0 10%;cursor:zoom-in" alt="Self-reference as a QR code" onClick="if (!window.__cfRLUnblockHandlers) return false; var s=this.style;if(s.cursor==='zoom-in'){s.height=s.width='50vw';s.cursor='zoom-out'}else{s.height=s.width='8vw';s.cursor='zoom-in'}" data-cf-modified-fe7134a6dcdb2858250c1d29-="" /> </div>
Radar WebKit Bug Importer
Comment 3 2021-09-15 08:01:27 PDT
<rdar://problem/83150855>
Note You need to log in before you can comment on or make changes to this bug.