background-image position off with non-100% zoom with use of background-size property

• Component: CSS
• Status: RESOLVED FIXED

Originally filed with Chromium, but also exists in WebKit nightly & Safari, but at different zoom levels: https://code.google.com/p/chromium/issues/detail?id=260319

Simple test page: http://danauclair.com/webkit-bug.html

In Safari this bug can be seen when an element has a background-image (such as an image sprite containing multiple icons) and also sets the background-size in order to scale the image (used for 2x sprites, to scale properly for retina displays). If you zoom out once you can see the icon is no longer positioned correctly. If you zoom out to a second level, it lines up again, and if you zoom out to the third level it is incorrectly positioned again. When zooming in you can see the misalignment at the 5th zoom level. This bug also seems to exist in Chrome's fork of WebKit, but it occurs immediately upon zooming in at the first (110%) zoom level.

Doesn't seem to matter whether background-size is set via the shorthand syntax or as a separate priority. If background-size is not set (on a normal 1x sprite) zooming works properly.

[Ben Frain]

I'll second this issue. I've created a test case here using many different positioning units (rem, em, % and px) and all position incorrectly.

http://cdpn.io/Cctvl

Simply zoom the page in Safari to see the background images go 'off center'. View the same page in current Firefox builds to see the correct behaviour.

[zalan]

(In reply to comment #1)
> I'll second this issue. I've created a test case here using many different positioning units (rem, em, % and px) and all position incorrectly.
> 
> http://cdpn.io/Cctvl
> 
> Simply zoom the page in Safari to see the background images go 'off center'. View the same page in current Firefox builds to see the correct behaviour.

This seems to be fixed on trunk. Please check with the latests highly build. 
With subpixel positioned images we behave like FF.

[Benjamin Poulain]

> > http://cdpn.io/Cctvl
> > 
> > Simply zoom the page in Safari to see the background images go 'off center'. View the same page in current Firefox builds to see the correct behaviour.
> 
> This seems to be fixed on trunk. Please check with the latests highly build. 
> With subpixel positioned images we behave like FF.

Good. Let's close then.

[Ben Frain]

Yes, working great in Nightly, thanks.

[paladox]

Hi do you know the link to this change because chromium is having the same problem when zooming out. and would like to backport that change to chromium.