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 […]

… 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 :-D

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!





Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 3

Comments are closed.
  1. 1

    I like web design a lot. Your website is very nice. Do you guys know any good web classes that I can take?

  2. 2

    I went here researching goth culture! This post has a strange visibility on bing even if it wasn’t in fact the things I was searching about

  3. 3

    Now it is 2011 – and CSS3 features should work better in todays “next generation” browsers. I tried to make use of this.
    As you said – css3 box-shadow is neat and sweet. But I discovered the same difficulties in firefox and webkit browsers: scrolling the page is inacceptable slow.
    Not locally. Only online.
    Some claim this occurs only when browser renders large blurred shadows of large objects.

Comments are closed.