Recently I was working on developing a site from a great design making use of a lot of CSS3 for one of our clients here at Brunello and hit a bit of a cross browser bug that had me stumped.
I was working with a centrally aligned main column that needed to have the illusion of fading from dark to light as you scroll down the page and also needed a shadow on either side of the column from the top to bottom.
I separated this design into 5 columns: outside shadow left, outside fade column left, center column in white, right outside fade column, right outside shadow. I then applied a wrapper to all 5 columns and styled each appropriately.
The first problem was defining the height of these individual columns since the height of the center content containing column would change dependent on the length of the articles on the page.
That's when I decided to employ a lesser known jQuery function: height(). Here is what the code looked like.
This worked wonderfully in Firefox, in Internet Explorer and even amazingly in IE6! But when I went to test in Safari and Chrome — Kaboom! Apparently the WebKit based browsers apply the jQuery before the page has completely loaded, therefore getting a height that is only that of where the page has loaded when it runs.
After Googling and visiting jQuery's bug tracker I somehow stumbled on a fix.
So without further ado, here it is:
Simply use $(window).load(function() instead of $(document).ready(function()
Since it always feels like a big accomplishment to me to fix a bug, I feel happy thinking that others will make use of this fix. Enjoy!