Rob Goodlatte  

I’ve been frustrated by a 1 pixel background-image shift in Safari ever since I discovered the bug last May. The problem occurs when positioning background images using the ‘center’ keyword. It’s a rounding problem - odd window widths cause centered background images to misalign with centered div’s. I spent hours tweaking style sheets, but met no success. After months of discontent I finally sat down and wrote a quick javascript fix for the problem.

Update: I discovered a very simple general solution, though it presents new problems.
Update 2: I’ve found a simple solution that works for all rounding cases with no apparent bugs.

The Problem

Below are some screenshots of the home page before applying the fix:


My fix hasn’t yet been applied to subpages, so the problem is still visible at the bottom of this page as well.

Obviously a one pixel shift isn’t a design-breaking bug. In fact, only one other person has actually noticed it. But it’s certainly an annoyance and worth fixing.

Heres the bits of CSS that cause the problem:

#main {
    background: url(images/mid.gif) top center repeat-y;
    ...
}
#footer {
    width: 100%;
    text-align: center;
    margin: auto;
    ....
}
#footcontent {
    background: url(images/footer.gif) top center no-repeat;
    width: 980px;
    margin: auto;
    ...
}

UPDATE: General Solution

This code works in all cases, but it forces a browser resize when an odd browser width is detected. In other words, the browser is forced into an even width where the rounding error doesn’t occur. Unfortunately the fix itself produces another bug: the window will sometimes momentarily flash to white when resizing. Update: By adding a simple delay, the flash-to-white problem has been solved.

window.onload = resizeIfOdd;
window.onresize = forceSafariEven;

function resizeIfOdd(){
if(navigator.userAgent.indexOf('Safari') != -1)
 if(document.documentElement.clientWidth % 2 == 1)
  window.resizeBy(-1,0);
};

function forceSafariEven(){
 window.setTimeout('resizeIfOdd()',5);
};

Shortcomings

• Screen occasionally flashes white when resizing browser window.

Download the Script

Download (.zip) - 0.6 KB

Thanks to Mike Vierow for sending me his research on this subject.

If anybody has any suggestions for how to improve my code, please leave them in the comments below or drop me a line.

Technorati Tags: Javascript, DOM, Safari, Apple