|Summary:||Unwanted parts of the image are visible with background-position after zooming|
|Severity:||Normal||CC:||dhess, dtrebbien, mitz, r.goyet, robert, simon.fraser|
|Version:||528+ (Nightly build)|
|OS:||OS X 10.6|
Description r.goyet 2010-09-15 14:56:16 PDT
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.
Comment 1 r.goyet 2010-09-15 14:57:03 PDT
Created attachment 67720 [details] This is the "incorrect" behaviour on MobileSafari, iPad 3.2. As you can see, the button has weird vertical lines...
Comment 2 r.goyet 2010-09-15 14:58:08 PDT
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.
Comment 3 r.goyet 2010-09-15 14:59:43 PDT
Created attachment 67722 [details] Correct behavior in Chrome with a 1:1 ratio
Comment 4 r.goyet 2010-09-15 15:00:29 PDT
Created attachment 67723 [details] Incorrect behavior in MobileSafari, iPad 3.2. Weird vertical lines on the button
Comment 5 r.goyet 2010-09-17 01:54:17 PDT
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...
Comment 6 Simon Fraser (smfr) 2010-09-17 08:47:15 PDT
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
Comment 7 r.goyet 2010-09-17 12:16:40 PDT
Created attachment 67928 [details] This pictures shows the bug happening in latest Chrome version (6.0.472.53)
Comment 8 r.goyet 2010-09-17 12:17:50 PDT
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.
Comment 9 r.goyet 2010-09-17 12:19:05 PDT
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.
Comment 10 Simon Fraser (smfr) 2010-09-17 12:20:14 PDT
Doesn't reproduce in Safari. Please file Chrome-specific bugs on chromium.
Comment 11 r.goyet 2010-09-17 15:02:45 PDT
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.
Comment 12 r.goyet 2010-09-17 15:04:13 PDT
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.
Comment 13 Simon Fraser (smfr) 2010-09-17 15:09:49 PDT
OK, you weren't clear that the red borders were the issue.
Comment 14 David Hess 2010-09-24 15:02:06 PDT
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 ----