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...
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.
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.
OK, you weren't clear that the red borders were the issue.
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 ----