Correcting the Center Aligned Background Bug in css

This is an annoying bug that frequently pays us a visit when trying to align a combination of center aligned backgrounds. If you pay close attention, you will catch these bugs on a number of sites, but for those who don’t know what I’m talking about let’s take a look at the issue.

The Issue (Commonly seen in Firefox & Safari):

The bug appears when trying to align even numbered width backgrounds, with an odd numbered width browser viewport (or vice versa). For example, if the background is an even width of 970px, centering this in a browser viewport of 1501px can have buggy effects on where exactly to center align. This will result in causing this 1px unalignment bug.

Now you are probably thinking it’s not a big deal if the browser viewport is manually stretched to an odd number since most default browser sizes lands on an even width anyways. True in some cases, but in Firefox and Safari, once your content passes the fold and adds a vertical scroll, it creates a discrepancy within your perfect environment.

See Below for an Example (Firefox/Safari/Chrome)

Correcting the Center Aligned Background Bug in css

Correcting the Center Aligned Background Bug in css

Since the vertical scroll throws in this discrepancy, I decided to take a closer look. It turns out the scroll is 17px wide (15px wide in Safari), which throws off our viewport/background total to an odd number.

Correcting the Center Aligned Background Bug in css

Correcting the Center Aligned Background Bug in css

How do we tackle this issue?
We can try to hack this up targeting each browser, but it won’t solve this vertical scroll bug.

The Solution

To keep consistency with layouts with and without vertical scrolls, we can simply add the scroll by default and shift -1px on the unaligned background image.

html {
	margin-left: -1px;
	overflow-Y: scroll;
}

Unfortunately, Opera loses out when we implement this technique. To fix Opera, here is one nasty hack. *Note – Since this Opera hack cannot add properties to html and body tags, I had to force shift everything by -1px.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body *{ margin-left: -1px;}
}

Conclusion

Keep in mind this is not a complete fix. Once you manually adjust the viewport to an odd number, the mysterious 1px bug is back in action. The good thing about this technique is that it kills the bug for most standard browser/viewport sizes.

I mainly wanted to post this to see what other designers/developers have come up with to move around this bug. If you have come across this issue and have tackled it in a better way, I would love to hear about it!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>