Bug 230222
| Summary: | image-rendering:pixelated is broken by position:fixed | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Pierre Carrier <pc> |
| Component: | Compositing | Assignee: | Simon Fraser (smfr) <simon.fraser> |
| Status: | NEW | ||
| Severity: | Normal | CC: | kevin_neal, sabouhallawa, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | Unspecified | ||
Pierre Carrier
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)
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
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
<rdar://problem/83150855>