Window Resize/Mobile Browser Background Bugs
Last week I noticed something very odd on Blue Anvil when resizing the browser window; after some casual browsing I discovered it was not just my site with the problem and that it was quite widespread on many ‘web 2.0′ style sites.
The problem occurs when resizing the browser window; cutting off background images and potentially making text illegible. Worse still, the bug also seems to affect mobile browsers with a zoom function, such as opera mobile.
After some dabbling I found a solution, which I shall explain in this post.
The sites that are most affected are those that use ‘content strips’ as I like to call them; that is a full width background with content centered down the middle. I tend to code a ‘strip’ like this:
1 2 3 4 5 | <div id="header">
<div class="inner">
...Content goes here...
</div>
</div> |
In this example #header is a block level element making it full width with a background image (usually tiled). .inner is my content div; it has a width set and auto-margins to make it centered on the page. The diagram below shows the structure of the layout on blue anvil:
If you make the window smaller and then use the horizontal scrollbar in the browser window you will notice the background gets ‘cut-off’. This seems to affect all modern browsers. From what I can gather, it seems the divs with the background image resize with the browser window, meaning any fixed width content will spill out and be shown on the page background; this demo page has the bug for you to see.
The problem itself is not major for most people, since (I assume) resizing the window and scrolling is quite rare. However I have noticed it happening before on the Nintendo Wii browser, and some mobile browsers (opera mobile for instance) where the problem can be more severe; its more of a problem on these devices because It can prevent the user from being able to read content. For example, when opera mobile cut the background off of the footer on Blue Anvil the white text was not legible, as this screenshot shows (taken from my HTC Diamond using Opera Mobile before I fixed the layout):
I experimented with all sorts of attempted fixes; wrappers, 100% widths, clearing…nothing seemed to work at first. In the end I found a workable solution which was actually quite simple: min-width. Using min-width on the div with the background prevented the browser from shrinking it too much hence eliminating the problem.
This fix is quite simple and does not seem to affect anything else on the page or cause any issues of its own, so it is something which can be added easily to any layout suffering from this problem.
Enjoy.
Found this post useful? Why not buy me a coffee!
D Martin says:
I came across the exact same issue when designing my latest blog. I banged my head for a solid hour before figuring out “min-width”.
Comment made on July 18, 2008 at 1:48 pm
Mike Jolley says:
Similar to me then; its very obscure and hard to notice.
Comment made on July 18, 2008 at 5:31 pm
sunny says:
solved my problem. Thanks.
Comment made on October 24, 2008 at 12:43 pm
Paul says:
Hey dude, your blog is awesome. Appreciate people like you in this day and time of a changing of the reigns in web styling.
Comment made on January 31, 2009 at 11:58 am
Marcy Sutton says:
Thanks for the tip! Very informative and I really appreciated the visual demo. It helped me diagnose my problem as being what you described.
However, be aware that min-width is not supported in IE6, which still has at least 12% of the market share.
Comment made on October 26, 2009 at 5:05 pm
webguy says:
http://www.kbcafe.com/csharp/?guid=20051222122720
#usethis{min-width: 450px;
width:expression(document.body.clientWidth < 762 ? "740px" : "100%" );}
Comment made on February 17, 2010 at 2:40 pm
Wilco says:
@Marcy Sutton: thnx for the tip. nouw my head isn’t bouncing on my desk
Comment made on July 28, 2010 at 8:48 am