CSS rules that slow down the browser speed (rendering)

Question

I'm searching for the biggest mistakes that you can make in your CSS code; CSS rules that slow down the browser speed (rendering).

For example:

.myDraggables {
    box-shadow: 0px 1px 2px #000 inset; 
    -moz-box-shadow: 0px 1px 2px #000 inset; 
    -webkit-box-shadow: 0px 1px 2px #000 inset;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd, endColorstr=#fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#fff));
    background: -moz-linear-gradient(top,  #cdcdcd,  #fff);

    border-radius:5px 7px 1px 3px;
    -moz-border-radius:5px 7px 1px 3px;
    -webkit-border-radius:5px 7px 1px 3px;
}

If you have 10 draggable elements (many tags inside) with this class, the drag would be very slow (jerk). So, does anybody know a list of CSS rules that you shouldn't use?

It's often a combination of styles. In this case, the combination of gradient, rounded corners, dragging and having many of them. — GolezTrol, Nov 05 '11 at 12:13
It also depends on the browser. IE8 has some strengths over FF and vice-versa, and Chrome really seems to handle everything well. — Wesley Murch, Nov 05 '11 at 12:34
hope this older answer can help you - http://stackoverflow.com/questions/7486017/css3-what-are-the-performance-best-practices/7488014#7488014 — c69, Nov 05 '11 at 12:44
I experienced, that the fixed background image can also slow the rendering while scrolling. — deejayy, Nov 05 '11 at 12:53

score 3 · Answer 1 · answered Nov 05 '11 at 12:50

One that's easy to make: using a tiny image (lets say 5x5) as a background repeat for big areas is slow when it comes to rendering. So it's advisable to use a bigger picture for repeat patterns (eg. 50x50). The size of a file increases just a bit, but the performance is way better.

score 0 · Answer 2 · answered Jun 01 '15 at 16:07

0

Assigning overflow settings to the elements slows the scrolling in mobile browsers

answered Jun 01 '15 at 16:07

Erkan

41
1
11

1

Can you cite some supporting literature? – Hassan Baig Nov 19 '17 at 16:02

score 0 · Answer 3 · answered Nov 05 '11 at 13:44

0

Avoid long paths i.e.

body div div ul li span a {}

Avoid css expressions i.e.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

And anything that microsoft implemented i.e. DX etc.

answered Nov 05 '11 at 13:44

toomanyairmiles

6,465
8
43
71

CSS rules that slow down the browser speed (rendering)

3 Answers3