Box-shadow, Firefox 3.6 & Opera 10.6

I’m currently building a site for a dream client—one whose website user base is built of tech-oriented people, who has almost no Internet Explorer 6 in his stats, and who groks, and even encourages, progressive enhancement. I’m using lots of HTML5 and CSS3 goodness on the site and it’s great fun!

But in certain areas, dealing with new, and still developing technologies is proving interesting. One of them is related to border-radius. Thanks to Dave Gregory (@screwlewse) for his brilliant sleuthing and helping me track this little bugger down!

In a nutshell, on top of CSS3 and HTML5, the site (which I can’t show quite yet) makes use of a lot of generated content. It was rendering fine in Webkit-based browsers, but in Firefox (and later I found the same in Opera), there was a horizontal scrollbar of approximately 10px. I started the process of commenting CSS out, bit by bit, beginning with my more complex rules comprised of generated content. My early finger pointing was there was in that direction—but there was nothing there. After much hair pulling, curse words, and other unmentionables, we found the reason.

Though the spec says the box-shadow property should not add any size to the element, Firefox adds the size of the box-shadow spread on the right side of the element (that’s where it was in my case anyway—I haven’t had time to do exhaustive testing). Since this site is liquid (based on percentages) and the full browser width is used, the shadow place on the header was creating a space on the right side of the page. I haven’t had time to find a fix yet, so for now, that property is commented out in my client’s page (Yay for browser prefixes!). But perhaps one will appear.

You can see a simplified example of this Firefox bug for yourself. View in Firebug and comment out the -moz-box-shadow property to watch it disappear. And lest we pick only on Firefox, Opera shows the same problem.

Happy coding!