Bug 45840 - Unwanted parts of the image are visible with background-position after zooming
Summary: Unwanted parts of the image are visible with background-position after zooming
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC OS X 10.6
: P2 Normal
Assignee: Nobody
URL: http://applidium.com
Keywords:
Depends on:
Blocks:
 
Reported: 2010-09-15 14:56 PDT by r.goyet
Modified: 2014-11-18 10:55 PST (History)
6 users (show)

See Also:


Attachments
This is the "correct" behaviour in Chrome with a 1:1 ratio (28 bytes, text/plain)
2010-09-15 14:56 PDT, r.goyet
no flags Details
This is the "incorrect" behaviour on MobileSafari, iPad 3.2. As you can see, the button has weird vertical lines... (28 bytes, text/plain)
2010-09-15 14:57 PDT, r.goyet
no flags Details
Correct behavior in Chrome with a 1:1 ratio (3.75 KB, image/png)
2010-09-15 14:59 PDT, r.goyet
no flags Details
Incorrect behavior in MobileSafari, iPad 3.2. Weird vertical lines on the button (3.48 KB, image/png)
2010-09-15 15:00 PDT, r.goyet
no flags Details
This pictures shows the bug happening in latest Chrome version (6.0.472.53) (61.54 KB, image/jpeg)
2010-09-17 12:16 PDT, r.goyet
no flags 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. (1.80 KB, application/zip)
2010-09-17 12:17 PDT, r.goyet
no flags 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. (28.73 KB, image/png)
2010-09-17 15:02 PDT, r.goyet
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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
----