Bug 45840 – Unwanted parts of the image are visible with background-position after zooming

• Status: NEW
• Component: CSS

Created attachment 67719 [details]
This is the "correct" behaviour in Chrome with a 1:1 ratio

When viewing this page in Safari (or Chrome), it behaves just fine.

This page extensively makes use of CSS sprites.

However, when viewing this page on any iOS device, there are glitches all over the place, on "edges" of each DOM node that uses a CSS sprite.

Created attachment 67720 [details]
This is the "incorrect" behaviour on MobileSafari, iPad 3.2. As you can see, the button has weird vertical lines...

If I re-write the same page using one image per DOM node (i.e. no CSS sprite), then it looks just great at any zoom level. However this is just a workaround, and not even a good one as the page makes 3 times as many HTTP requests.

Created attachment 67722 [details]
Correct behavior in Chrome with a 1:1 ratio

Created attachment 67723 [details]
Incorrect behavior in MobileSafari, iPad 3.2. Weird vertical lines on the button

Hi Simon,

  Would you mind having a look at this ? This seems like a major issue to me as CSS sprites are used all over the web. Actually you can even reproduce this on Google...

[Simon Fraser (smfr)]

Please attach a testcase. You don't say what features of CSS you're using.

Also, this is not the place to report bugs on iOS. That's bugreporter.apple.com

Created attachment 67928 [details]
This pictures shows the bug happening in latest Chrome version (6.0.472.53)

Created attachment 67930 [details]
Here is an very, very simple test case that exhibits that bug. Just open in latest chrome, and "zoom in" once (Command-+ on the Mac). You'll see red borders you should *not* see.

Hi Simon,

Thanks for the feedback.

As requested, I attached a very simple test case. I also attached a picture that explains what's wrong.

Actually I initially thought the bug only happened on the iOS. Thing is, it also happens in latest public version of Chrome. It is just much more noticeable on iOS devices as you're using full-page zooming all the time on these devices.

[Simon Fraser (smfr)]

Doesn't reproduce in Safari. Please file Chrome-specific bugs on chromium.

Created attachment 67957 [details]
Here is the bug happening in the current nightly build of WebKit for the Mac. There *is* a red border that should not be visible.

Actually Simon, I don't know how you've tested it, but it DOES reproduce.
In Safari, in Chrome, in a WebKit nightly build, on MobileSafari, you name it.

[Simon Fraser (smfr)]

OK, you weren't clear that the red borders were the issue.

[David Hess]

There's a pretty old Chromium bug filed on this:

http://code.google.com/p/chromium/issues/detail?id=8279

Based on my experiments, I think this comment is the pertinent one:

----
This is a WebKit bug affecting full page zoom. The issue is that rounding is
happening differently in different places. WebKit basically needs to implement what
Mozilla did:
http://weblogs.mozillazine.org/roc/archives/2008/10/hating_pixels.html
----