Correcting the Center Aligned Background Bug
Tags: BeginnerThis 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)
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.
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!
Không có nhận xét nào:
Đăng nhận xét