Bug 230222 - image-rendering:pixelated is broken by position:fixed
Summary: image-rendering:pixelated is broken by position:fixed
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: WebKit Nightly Build
Hardware: All Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-13 09:55 PDT by Pierre Carrier
Modified: 2022-10-31 11:24 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Pierre Carrier 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>
Comment 1 Simon Fraser (smfr) 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).
Comment 2 Pierre Carrier 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>
Comment 3 Radar WebKit Bug Importer 2021-09-15 08:01:27 PDT
<rdar://problem/83150855>