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

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>