Bug 177037 - "background-repeat: repeat" incompatible with "image-rendering: pixelated"
Summary: "background-repeat: repeat" incompatible with "image-rendering: pixelated"
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-09-16 07:31 PDT by Michael Stillwell
Modified: 2023-02-25 08:15 PST (History)
9 users (show)

See Also:


Attachments
actual (67.92 KB, image/png)
2017-09-16 07:31 PDT, Michael Stillwell
no flags Details
expected (32.71 KB, image/png)
2017-09-16 07:32 PDT, Michael Stillwell
no flags Details
reproduce.html (804 bytes, text/html)
2017-09-16 07:32 PDT, Michael Stillwell
no flags Details
reproduce.html with filter workaround (1.04 KB, text/html)
2022-01-23 20:50 PST, Xin Liu
no flags Details
screenshot for reproduce.html with filter workaround (555.17 KB, image/png)
2022-01-23 20:50 PST, Xin Liu
no flags Details
Screenshot with examples demonstrating image-rendering bug (272.32 KB, image/jpeg)
2023-02-25 08:15 PST, webkit@samuelfine.com
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Michael Stillwell 2017-09-16 07:31:37 PDT
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
Comment 1 Michael Stillwell 2017-09-16 07:32:20 PDT
Created attachment 321005 [details]
expected
Comment 2 Michael Stillwell 2017-09-16 07:32:47 PDT
Created attachment 321006 [details]
reproduce.html
Comment 3 Michael Stillwell 2017-09-16 07:34:00 PDT
Sorry, submitted too soon, and won't let me edit.

Bug exists on Safari Tech Preview and Nightly (12603.3.8, r222127).
Comment 4 Alexey Proskuryakov 2017-09-18 13:45:37 PDT
> 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?
Comment 5 Michael Stillwell 2017-09-18 14:00:03 PDT
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).
Comment 6 Zhifei Fang 2017-09-21 07:07:04 PDT
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.
Comment 7 Michael Stillwell 2020-03-26 13:48:12 PDT
Bug still exists as of Safari 13.1 (15609.1.20.111.8).
Comment 8 Radar WebKit Bug Importer 2020-03-26 14:23:04 PDT
<rdar://problem/60936323>
Comment 9 Xin Liu 2020-09-04 00:07:34 PDT
Problem still exists as of Safari Technology Preview 14.0 (16610.1.25.1.3)
Comment 10 Kai Luo 2021-06-08 22:49:32 PDT
This problem still exists as of Safari 15.0 (17612.1.15.1.14) on macOS 12.0 (21A5248p)
Comment 11 Xin Liu 2022-01-23 20:39:35 PST
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.
Comment 12 Xin Liu 2022-01-23 20:50:01 PST
Created attachment 449778 [details]
reproduce.html with filter workaround
Comment 13 Xin Liu 2022-01-23 20:50:50 PST
Created attachment 449779 [details]
screenshot for reproduce.html with filter workaround
Comment 14 Ahmad Saleem 2022-12-19 05:32:15 PST
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.
Comment 15 webkit@samuelfine.com 2023-02-25 08:14:33 PST
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.
Comment 16 webkit@samuelfine.com 2023-02-25 08:15:47 PST
Created attachment 465169 [details]
Screenshot with examples demonstrating image-rendering bug