230222 2021-09-13 09:55:42 -0700 image-rendering:pixelated is broken by position:fixed 2022-10-31 11:24:26 -0700 1 1 1 Unclassified WebKit Compositing WebKit Nightly Build All Unspecified NEW InRadar P2 Normal --- 1 pc simon.fraser kevin_neal sabouhallawa simon.fraser webkit-bug-importer oldest_to_newest 1792980 0 pc 2021-09-13 09:55:42 -0700 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> 1793063 1 simon.fraser 2021-09-13 13:27:50 -0700 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). 1793170 2 pc 2021-09-13 17:53:57 -0700 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> 1793703 3 webkit-bug-importer 2021-09-15 08:01:27 -0700 <rdar://problem/83150855>