“I'm an experienced web developer and software engineer. Welcome to my blog. If you need to reach out you can continue the conversation with a tweet to @geedew. I hope you find what you are looking for here. You can also find me on Github and StackOverflow.”

Box-Shadow will crash us all

In CSS3, some of the newest features can bite you. Recently, I discovered a serious issue with box-shadow and rendering. Box-shadow is a new feature that creates a shadow effect either outset (around a box) or inset (inside a box, like a glow). What I wanted to do, was create a soft glow on the inside of a website, using <body>, so that the entire site had an easy fade. The code that I used was currently use is:

1
2
3
4
body {
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}

This code actually worked works, and I didn’t notice any issues. However, the 8px fade was too abrupt; I kicked it up ‘just a tad’ to 200px (I have large ‘tads’). Big mistake as all ‘advanced’ browsers were crumbling in my wake. If they support box-shadow, they failed. The page loaded, but scrolling was a complete and utter failure.

For now, I will have to avoid doing this, especially to the large <body> tag. I will chime back in on the topic once I get some solid evidence and facts about it.