18013 2008-03-22 06:19:28 -0700 Margin auto: difference between centered divs and images in body background 2011-07-15 15:48:29 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac OS X 10.5 NEW http://www.xs4all.nl/~jjj/webkit_margin_auto InRadar P2 Normal --- 1 jjj webkit-unassigned dominicc efc mupo scottbruin stevethepocket oldest_to_newest 74799 0 jjj 2008-03-22 06:19:28 -0700 Please follow the link, this makes it clear immediately. We have a horizontally centered div and a centered image in the body background. When scaling the window smaller than the background image width, a 1px gap becomes visible. Apparently when the image is larger than the window, it's not perfectly centered? This works perfectly in Firefox. 74800 1 jjj 2008-03-22 06:25:22 -0700 After posting the bug, I noticed that while the gap is not visible in FF, the background image is still moved when making the window smaller, not similar to Safari. I'm not sure which behaviour is better. 116710 2 scottbruin 2009-04-06 20:55:12 -0700 I have found this bug troubling and it is widely complained about online with no known solution. The issue seems to stem from background-position: center [y]; rounding differently than margin: [y] auto; when a window is an odd width. This can cause serious visual alignment issues unless the same centering method is used for the entire page. 317865 3 stevethepocket 2010-12-06 15:14:18 -0800 I am using Windows 7 and have noticed this bug in both Chrome 8.0.552.215 and Safari 5.0.3. I downloaded the latest WebKit build (r73302) as per the recommendation and saw that it still has the problem. Curiously, my boss, who has a Mac, said over Skype that he's not experiencing it. A lot of developers, including myself, use a combination of background-align:center and margin:auto for centered backgrounds, so getting them to play nice with each other is fairly important. To the point of being worth fixing in an automatic patch rather than waiting for Safari 6. Curiously, this only happens when the window is wider than the background image. They both scale correctly from that point down. If you visit the link, shrink the window down to be narrower than the background, and start stretching the right edge of the window one pixel at a time, you can see the background uncover one pixel, then move right one pixel, then uncover, move, uncover, move, then move again when you get to the 1025-pixel mark. Very odd. 335515 4 mrowe 2011-01-17 14:13:54 -0800 <rdar://problem/8875207> 344495 5 efc 2011-02-02 19:56:22 -0800 There is a nice description of this bug at http://www.hackvalue.nl/en/article/85/off-by-one_errors_in_background_placement_in_web_browsers with an even simpler example http://www.hackvalue.nl/bug.html available. I have noticed that this bug can also result in a one pixel VERTICAL offset when using Mobile Safari (AppleWebKit/533.17.9) on iOS. Using a wrapper div with the background-position exhibits the bug (both horizontal and vertical): background-image: url(images/rea-back.png); background-position: center top; Using a wrapper div with the margin auto resolves the bug (both horizontal and vertical): background-image: url(images/rea-back.png); width: 1020px; margin: 0px auto; 344497 6 efc 2011-02-02 20:01:40 -0800 By the way, this seems to be the same bug reported as Bug 14956. 427361 7 dominicc 2011-06-25 07:45:59 -0700 *** Bug 14956 has been marked as a duplicate of this bug. *** 438034 8 101059 ian 2011-07-15 15:48:29 -0700 Created attachment 101059 A simpler test case that makes the problem more obvious. Why has this still not been fixed after being reported 3 years ago? All other rendering engines handle this case appropriately. 101059 2011-07-15 15:48:29 -0700 2011-07-15 15:48:29 -0700 A simpler test case that makes the problem more obvious. url.txt text/plain 58 ian aHR0cDovL2lhbnN0b3JtdGF5bG9yLmNvbS9leHBlcmltZW50cy9fY3NzLWNlbnRlcmluZy10ZXN0 Lw==