Bug 125118 - background-image position off with non-100% zoom with use of background-size property
Summary: background-image position off with non-100% zoom with use of background-size ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh Unspecified
: P2 Normal
Assignee: Nobody
URL: http://danauclair.com/webkit-bug.html
Keywords:
Depends on:
Blocks:
 
Reported: 2013-12-02 15:52 PST by daniel.auclair
Modified: 2015-04-20 13:37 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description daniel.auclair 2013-12-02 15:52:05 PST
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.
Comment 1 Ben Frain 2014-04-04 03:24:04 PDT
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.
Comment 2 zalan 2014-04-11 09:49:16 PDT
(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.
Comment 3 Benjamin Poulain 2014-04-12 11:35:23 PDT
> > 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.
Comment 4 Ben Frain 2014-04-12 14:01:43 PDT
Yes, working great in Nightly, thanks.
Comment 5 paladox 2015-04-20 13:37:42 PDT
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.