Off-by-one errors in background placement in web browsers

Joor Loohuis, November 26, 2009, 7981 views.

The rendering engines in some popular web browsers contain a bug, where a background positioned in the center of a block element is sometimes offset by one pixel relative to an element that is positioned with automatic margins.

Tags: , , , , , , ,

For some years now I frequently get asked by designers what can be done about a specific display problem in a design. The problem they encounter is an offset of 1 pixel in the placement of a background image that is centered in the element it is defined on. This problem only shows up when this background is required to line up with another element that is centered by applying a fixed width and automatic margins. What confuses some designers even more is that the display bug is elusive. It does not always show up, and depending on the working habits of the designer she or he may only learn about the problem when the customer reviews the end result. The image on the left is a typical example of the display bug. Now this isn't a new bug by any means, but it keeps rearing its head frequently enough for me to dedicate a little blog post to it.

Reproduction

Reproducing the problem is not very hard. Create a valid HTML document, with in the body just a single element:

 <div id="inner"></div>

Now add a little CSS:

body {
    margin: 0;
    background: #99C url(white-bg.png) 50% 0 no-repeat;
}
  1. inner {
width: 600px; height: 100px; margin: 100px auto; background: #EEE; }

The body of the document gets a background color, and an image that is placed horizontally centered. The image in question is a simple 600x100px white PNG. Now we place a div in the document, and give it a width that is the same as the width of the background image. We apply a top/bottom margin to line it up underneath the background image, and center the div by applying auto margins to the left and right (you can view the complete testpage if you're not inclined to roll it yourself). Now in some browsers, the placement of the div is sometimes offset by one pixel with respect to the background image. Whether this happens depends on the width of the browser. So play a bit with the browser width and try to reproduce the bug. An example is in the image to the right.

The cause

The exact cause of this bug must be hard to pin down. This bug has puzzled many designers over the years, and obviously so far it is not fixed in all browsers. What it appears to be is a difference in the calculation of the horizontal positions, or perhaps a difference in rounding. In some cases, realizing what causes the problem is a clue towards a workaround. For example, you could use a wrapper div that has the background image, and is exactly as wide as the background image itself. Center it with auto margins, and there should not be any offset bugs.

Tested browsers

I've tested some browsers I have at my disposal, and I've been able to reproduce the display problem in the following browsers:

  • Epiphany 2.28.0 on Linux (a WebKit based browser)
  • Firefox 3.0.15 on Linux
  • Google Chrome 3.0.195.33 on Windows Vista
  • Google Chrome 4.0.249.11 on Linux (I know, just beta, so not fair)
  • Internet Explorer 6.0 on Windows XP
  • Internet Explorer 7.0 on Windows Vista
  • Konqueror 4.3.2 on Linux (KHTML rendering engine)
  • Safari 4.0.4 On Windows Vista

Interestingly enough, some browsers show the opposite offset in exactly the same test. Browsers that don't show the bug in the test described above include:

  • Firefox 3.5.5 on Linux
  • Firefox 3.5.6pre on Windows Vista
  • Internet Explorer 8.0 on Windows XP

I should probably reduce these results to a list of rendering engines. If you know of other browsers that also display the problem, please let us know through the talkback feature below.

Social networking: Tweet this article on Twitter Pass on this article on LinkedIn Bookmark this article on Google Bookmark this article on Yahoo! Bookmark this article on Technorati Bookmark this article on Delicious Share this article on Facebook Digg this article on Digg Submit this article to Reddit Thumb this article up at StumbleUpon Submit this article to Furl

Talkback

respond to this article