Created attachment 321004 [details] actual It doesn't seem to be possible to have set both "background-repeat: repeat" and "image-rendering: pixelated" on the same element. Live demo: https://vagabond-bubble.glitch.me
Created attachment 321005 [details] expected
Created attachment 321006 [details] reproduce.html
Sorry, submitted too soon, and won't let me edit. Bug exists on Safari Tech Preview and Nightly (12603.3.8, r222127).
> Bug exists on Safari Tech Preview and Nightly (12603.3.8, r222127). Does it also exist in shipping Safari 10, or is this a regression?
It's not a regression, it also affects the shipping Version 10.1.2 (12603.3.8), and iOS Safari (current/stable, not sure what version).
Have check the code: We finally reach GraphicsContext::drawPattern to draw the background On Mac it will call core graphics to draw the background image With "image-rendering: pixelated" , we will disable the interpolation about scaling an image. it happend in GraphicsContext::drawTiledImage, InterpolationQualityMaintainer interpolationQualityForThisScope(*this, imagePaintingOptions.m_interpolationQuality); this will finally call CGContextSetInterpolationQuality to set the InterpolateNone So far so good, we have disable the interpolation. However, When we call: CGContextDrawTiledImage(context, FloatRect(adjustedX, adjustedY, scaledTileWidth, scaledTileHeight), subImage.get()); to finally draw the background image Looks like the core graphics ignore the InterpolateNone to scale the tile image. It will be easily verified if we write down a very simple code just using same setting to call the CGContextDrawTiledImage to see the result. We should also test the other callpath which is when we need clip the background image, it will use CGPatternCreate series method to draw background instead of CGContextDrawTiledImage.
Bug still exists as of Safari 13.1 (15609.1.20.111.8).
<rdar://problem/60936323>
Problem still exists as of Safari Technology Preview 14.0 (16610.1.25.1.3)
This problem still exists as of Safari 15.0 (17612.1.15.1.14) on macOS 12.0 (21A5248p)
Today I discovered a workaround for this issue. If the container has a CSS filter rule, background-repeat and image-rendering will work as expected. I will try to upload an example HTML.
Created attachment 449778 [details] reproduce.html with filter workaround
Created attachment 449779 [details] screenshot for reproduce.html with filter workaround
It is an issue without background-repeat as well - see below test case: https://jsfiddle.net/2tprcLvg/ Above test case is from Blink patch - https://chromium.googlesource.com/chromium/blink/+/38754ffc821124b6f547bdb9dc96e5a4be160a15 and Safari 16.2 and STP160 still broken compared to Chrome Canary 111 and Firefox Nightly 110 both match each other in above test case.
I'm still experiencing this issue with Safari 16.3 on iPadOS 16.3, iPad Pro 12.9" 3rd gen. Using `image-rendering: pixelated` on an element with `background-repeat: repeat` (or repeat-x/repeat-y) results in a blurry, non-pixelated background. I've created a test page with examples here: https://safari-16-image-rendering-bug.glitch.me/ Per Xin Liu's comment from last year, I've tried adding a `filter` rule to the element, which appears to result in a less-blurry background but still not as pixelated as it should be. Will attach a screenshot of the current state as of February 25, 2023. Happy to provide any additional details if useful.
Created attachment 465169 [details] Screenshot with examples demonstrating image-rendering bug