Bug 177037 – "background-repeat: repeat" incompatible with "image-rendering: pixelated"

• Component: CSS
• Status: RESOLVED MOVED

[Michael Stillwell]

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

[Michael Stillwell]

Created attachment 321005 [details]
expected

[Michael Stillwell]

Created attachment 321006 [details]
reproduce.html

[Michael Stillwell]

Sorry, submitted too soon, and won't let me edit.

Bug exists on Safari Tech Preview and Nightly (12603.3.8, r222127).

[Alexey Proskuryakov]

> 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?

[Michael Stillwell]

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).

[Zhifei Fang]

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.

[Michael Stillwell]

Bug still exists as of Safari 13.1 (15609.1.20.111.8).

[Radar WebKit Bug Importer]

<rdar://problem/60936323>

[Xin Liu]

Problem still exists as of Safari Technology Preview 14.0 (16610.1.25.1.3)

[Kai Luo]

This problem still exists as of Safari 15.0 (17612.1.15.1.14) on macOS 12.0 (21A5248p)

[Xin Liu]

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.

[Xin Liu]

Created attachment 449778 [details]
reproduce.html with filter workaround

[Xin Liu]

Created attachment 449779 [details]
screenshot for reproduce.html with filter workaround

[Ahmad Saleem]

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.

[[e-mail]]

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.

[[e-mail]]

Created attachment 465169 [details]
Screenshot with examples demonstrating image-rendering bug

[Karl Dubost]

*** Bug 271774 has been marked as a duplicate of this bug. ***

[Karl Dubost]

On https://bugs.webkit.org/show_bug.cgi?id=271774#c1

Some additional findings
There must be a code path which kind of ignore the computation for pixelated? 
Maybe in https://searchfox.org/wubkat/rev/bbfd3d9efcbb9c24abb655b8759ee700ef5d5f34/Source/WebCore/rendering/ImageQualityController.cpp#117



https://codepen.io/chuckskoda/pen/mdgMxBm
This is happening as soon as background-size is going from 100% to 99.9999…%
Interestingly, this is not happening for bigger than 100%. 190% is perfectly pixelated.


For the 1st item.

div {
    width: 128px;
    aspect-ratio: 1;
    image-rendering: pixelated;
    background-repeat: repeat;
    background-size: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVR42mNAAv9RMBr4PzcEGaMoQgggJBE0VAEGxlTQwKACphFshAJkCRBGMYGgIwl6EwBFbk7XYvgRBQAAAABJRU5ErkJggg==);
}



The bluriness starts later:

background-size: 100%; OK
…
background-size: 99.7%; OK
background-size: 99.6%; blurry

[Said Abou-Hallawa]

This is an issue in a framework below WebKit. It is tracked by Apple internally as rdar://60936323.