Bug 271774 – background-image not respecting image-rendering when repeating in any direction

• Component: Images
• Status: RESOLVED DUPLICATE

[Chuck Skoda]

Expected:
  `background-image` respects the `image-rendering` value on an element

Actual:
  If my element has a `background-repeat` setting other than `no-repeat`, and `background-size` or `background-position` causes tiling of the background, the `image-rendering` falls back to the default for scaling of the image.

Example:
https://codepen.io/chuckskoda/pen/mdgMxBm


This bug is 100% reproducible in Safari on Mac and iOS, it is NOT present in Firefox 124, or Chrome 123.

[Karl Dubost]

Created attachment 470657 [details]
rendering in safari, firefox, chrome

The CSS is 

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

#two {
  background-size: 50%;
}

#three {
  background-position: 64px 64px;
}

#four {
  background-position: 64px 64px;
  background-repeat: no-repeat;
}


#two and #three are blurry on Safari, but not Chrome and Firefox. 


window.getComputedStyle(document.querySelector('#two')).background
window.getComputedStyle(document.querySelector('#two')).imageRendering 



Safari
"rgba(0, 0, 0, 0) url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVR42mNAAv9RMBr4PzcEGaMoQgggJBE0VAEGxlTQwKACphFshAJkCRBGMYGgIwl6EwBFbk7XYvgRBQAAAABJRU5ErkJggg==\") repeat scroll 0% 0% / 50% auto padding-box border-box"
pixelated

Firefox
'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVR42mNAAv9RMBr4PzcEGaMoQgggJBE0VAEGxlTQwKACphFshAJkCRBGMYGgIwl6EwBFbk7XYvgRBQAAAABJRU5ErkJggg==") 0% 0% / 50%' 
pixelated

Chrome
'rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVR42mNAAv9RMBr4PzcEGaMoQgggJBE0VAEGxlTQwKACphFshAJkCRBGMYGgIwl6EwBFbk7XYvgRBQAAAABJRU5ErkJggg==") repeat scroll 0% 0% / 50% padding-box border-box'
pixelated


There must be a code path which kind of ignore the computation for pixelated? 

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

[Radar WebKit Bug Importer]

<rdar://problem/125594729>

[Karl Dubost]

*** This bug has been marked as a duplicate of bug 177037 ***