CODEWITHSUNDEEP
cssreactjscss-transitionstailwind-css
PCPbiscuit
PCPbiscuit

Reputation: 583

CSS performance issues. Stuttering during class apply

I'm implementing a dark theme on my website using tailwind classes. For example: <tr className="bg-white dark:bg-dark-blue text-left dark:text-white transition-colors duration-300"></>

And for some reason, whenever I change my theme the transition isn't smooth but laggy and stuttering. I've noticed that with the increase of dark-styled elements on the page, the lag has gotten worse.

I'm not sure if this is actually a tailwind problem or a general CSS performance problem in the browser.

UPDATE

After some test I've come to the conclusion that it actually has nothing to do with transitions but with CSS itself.

I have a lot of elements on the page with dark classes set initially and then whenever I change the theme I just add/remove 'dark' class in <html>. I have may be 50 elements on the page which change their text color and background color and all of them are laggy whenever the theme gets changed. The lag is similar to when you have a memory leak or a loop. It stutters then loads all at once and stuff like that.

So I guess my question is how to optimize CSS performance in this case? or overall?

UPDATE 2

According to Performance page in devtools I'm dropping a lot of frames when changing the theme. And it actually feels like I'm getting 5fps. Here is a screenshot of Performance page prnt.sc/Zz6T88ZFs6Fp. I'm not sure how to read it, may be somebody can give some useful info

If anyone has ever faced/solved this problem, I'd greatly appreciate your advice

Upvotes: 0

Views: 1888

Answers (4)

PCPbiscuit
PCPbiscuit

Reputation: 583

After a lot of research I've managed to finally find some useful info. With the help of this article and some info from here I found out that dropping frames is actually not uncommon but usually it is not as intense as in my case.

There are some particular lines in Profile.json (download from Network page), which can help you find the actual reason(s) of dropped frames. Look for unsupportedProperties. In my case it was {"args":{"data":{"compositeFailed":8224,"unsupportedProperties":["color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x76c803503df8"},"name":"Animation","ph":"n","pid":40040,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":13280,"ts":166257565931}. For me the reason was that too many elements on the page change their text color. 884 lines of compositeFailed related to 'color' for one theme switch on my page. Only refactor with the help of https://csstriggers.com/ would be effective in my case.

Currently, I don't know actual reasons for compositeFailed apart from that it has to do with color property and blink animation. Any Google devs would be welcome to enlighten me because I can't really find any info about that.

Upvotes: 0

senecaTheMeek
senecaTheMeek

Reputation: 88

I don't use tailwind and it's hard to test my response without example code but I had a very similar problem several years ago when browsers were a little dumb.

I had many classes for color throughout the html and toggled them with jquery. Here's a quick example of how...

$(".red").removeClass("red").addClass("blue");

I determined that, at the time, the problem was that the items were causing repainting for each change.

What I ended up doing was swapping a class on the body:

<body class="blue">
<a href="#">Whatever</a>
<a href="#">Something else</a>
<!-- lots more -->
</body>

And then:

body.blue a {
color: blue;
}
body.red a {
color: red;
}

And that worked beautifully because, as I understood it, the repaint happened all at once... but I'm guessing to even try you'd have to write a lot of stuff on your own instead of using tailwind. Maybe not, so I hope this line of thinking helps even if using tailwind.

Edit: if I had the same problem and couldn't fix it quickly enough I'd fade the body with a quick opacity out and then back in. Complete hack but it might look cool. Not a solution to your real problem but it might help if you can't fix it.

Upvotes: 1

B&#233;ranger M.
B&#233;ranger M.

Reputation: 91

It may have to do with the critical rendering path. I'd advice you to read this excellent article : Achieving 60 FPS Animations with CSS3. In a nutshell, if you have css transitions set other than on transform and opacity css properties, your browser has to recalculate the whole layout, which causes stuttering.

Upvotes: 3

Whisper Snow
Whisper Snow

Reputation: 1

You can go in the dev tools and then go under "network", then you click on "Disable cache".

Upvotes: 0

Related Questions