CODEWITHSUNDEEP
css
Talha Akbar
Talha Akbar

Reputation: 10040

CSS Selectors performance issues

I noticed that transitions lags if we have long selected tree of DOM in one selector.

Like:

#wrapper #content #box-container #boxer .box:hover .transition { 
    /* styles here */
}

Otherwise, If i use selector like this:

.box:hover .transition {
    /* styles here */
}

It works fine and does not lag . Is this true or issue is my document set up?

Upvotes: -1

Views: 155

Answers (2)

jerone
jerone

Reputation: 16881

An ID should exists only once on a page, so this will be sufficient:

#boxer .box:hover .transition { 
    /* styles here */
}

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157394

CSS3 effects, that includes transitions, animation, text-shadows etc, is based on browsers, some leave animations on GPU which will lag your animations if the GPU performance is not optimal. If the browsers don't use GPU they leave it on CPU, which will be at it's worst, so if it is lagging it is probably the GPU or CPU and not the DOM, yea obviously if you've too many nested class rules it will be pain for the browser to parse and also hits for performance, so avoid too many nested rules in your CSS

Chrome handles these better than compared to Firefox

If you want I am using heavy animation in one of the project I made, open it using firefox and chrome and see the difference, firefox will suck out all the power of your CPU while chrome will be handling it pretty normal

Upvotes: 1

Related Questions