NEW 289023
CSS property image-rendering:pixelated does not work on background-image when a border is set
https://bugs.webkit.org/show_bug.cgi?id=289023
Summary CSS property image-rendering:pixelated does not work on background-image when...
dianliang233
Reported 2025-03-03 16:47:36 PST
Created attachment 474401 [details] Screenshot of the example HTML file in Safari TP 1. Give a <div> The image is interpolated when upscaled, thus looking blurry. It should have been interpolated with nearest neighbor and the individual pixels should remain distinct. This is reproduced on iOS Safari and Safari TP on macOS. Not reproduced on stable Chrome and stable Firefox.
Attachments
Screenshot of the example HTML file in Safari TP (206.23 KB, image/png)
2025-03-03 16:47 PST, dianliang233
no flags
Not reproduced, Chrome Canary (96.02 KB, image/png)
2025-03-03 16:48 PST, dianliang233
no flags
HTML minimal reproducible example (829 bytes, text/html)
2025-03-03 16:49 PST, dianliang233
no flags
dianliang233
Comment 1 2025-03-03 16:48:31 PST
Created attachment 474402 [details] Not reproduced, Chrome Canary
dianliang233
Comment 2 2025-03-03 16:49:56 PST
Created attachment 474403 [details] HTML minimal reproducible example
dianliang233
Comment 3 2025-03-03 16:54:53 PST
My bad, pressed submit too early. Steps to reproduce: 1. Create two <div>s with a low-res background image. 2. Add image-rendering: pixelated to both of them. 3. Add a border to one of them. 4. Compare result.
Karl Dubost
Comment 4 2025-03-03 21:42:21 PST
this is happening even with ``` .border { border: 0.0000000000001px solid #242424; } ```
Radar WebKit Bug Importer
Comment 5 2025-03-10 17:48:14 PDT
Note You need to log in before you can comment on or make changes to this bug.