Codrops’ New Style: Lessons learned from applying CSS3

… or why your Mozilla could be slow when scrolling

As you can see, we changed the style of our beloved site. The original WordPress theme can be found here:

http://fresh01.co.za/2008/01/25/arctic-free-wordpress-theme/

The idea was to create a nice “fluid” layout that adapts with the screen size. I somehow managed to do that making the main elements having an absolute position and not giving any width to the content div. Up until then, everything was fine and the most important part was done.

Now, I tried to integrate some really cool box shadows for the images and also for the main content div. It looked awesome considering that I was only using the CSS3 box shadow property for Mozilla and Webkit browsers. Since most of the visitors seem to use Mozilla, I thought, what the heck, IE doesn’t show it, doesn’t matter!

After I integrated all the changes and finished little design details, I noticed something that messed around with my mind all night: Scrolling with the mouse wheel in Mozilla became incredibly slow!

Thinking that it was because I was testing on my local machine, I was blaming XAMPP and Apache and thought this cannot be. But when I uploaded the whole to the server it was as slow as locally! What really made me go mad was the fact, that it just happened in Mozilla! The God of browsers!

After hours of removing CSS and script I finally found the guilty: although the box shadow is all neat and sweet, applied to 1. a lot of and 2. to big elements will overload Mozillas rendering of the page! Once you scrolled through the whole page it will be fine, but try doing it at a rate of 1 inch per minute 😀

So, I was forced to take out all the -moz-box-shadow and put again a boring 1999 styled gray border around all the elements I had the shadow on.

Long story short, be careful with CSS3 experiments, they are still in testing phase…

Anyway, I hope you like our new design, enjoy it and keep reading!