Bug 18013 – Margin auto: difference between centered divs and images in body background

• Status: NEW
• Component: CSS

[Jan Boeijink]

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.

[Jan Boeijink]

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.

[Scott Hulbert]

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.

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.

[Mark Rowe (bdash)]

<rdar://problem/8875207>

[Eric Celeste]

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;

[Eric Celeste]

By the way, this seems to be the same bug reported as Bug 14956.

[Dominic Cooney]

*** Bug 14956 has been marked as a duplicate of this bug. ***

[Ian Storm Taylor]

Created attachment 101059 [details]
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.