ScrollTrigger causes permanent Style invalidation

[noerK]

Hey :)

First off: thnx for all the work around gsap.

My Project
I am currently building an hugo-page with many scroll triggered animations. Nothing special so far.

Scrolltrigger 3.6.0
gsap 3.6.0

My Problem
Safari (only) currently runs at very high CPU consumption without any animation actually running. I did a lot of research and finally found out that the animation itself does not matter - it happens as soon as i add ScrollTrigger to my animations. It seems that it causes Style invalidation and thus forces safari to rerender everything each frame. The css should is about 55 kb in size and uses css custom properties as well as some filter: invert(1) (i already removed them temporarily).
This already happens when only 1 ScrollTrigger is active. For example: (It doesn't matter if the box is present or not)
 

gsap.to(".box", {
  scrollTrigger: ".box", 
  x: 500
});

Hopefully the provided information is sufficient. 

Thnx in advance for every answer.
 

[ZachSaucier]

Hey noerK and welcome to the GreenSock forums.

 

I am not able to reproduce the issue that you're bringing up. In Safari's dev tools I see no layout/rendering updates and very low CPU usage. Can you please create a minimal demo that shows the issue?

See the Pen yLawepr by GreenSock (@GreenSock) on CodePen

[noerK]

Hey Zach,

thanks for your reply. I created a codepen out of your template and the bundles css of my project. I tried removing gsap and scrolltrigger from the sources and just then the CPU load goes down...
Maybe its some faulty css of mine? calculations?

See the Pen KKgEzez by noerK (@noerK) on CodePen

[ZachSaucier]

8 minutes ago, noerK said:

I tried removing gsap and scrolltrigger from the sources and just then the CPU load goes down...

Well, GSAP has to have a main ticker that runs every rAF in order to be able to run animations. So there is some CPU usage even if you don't have any tweens. But it's minimal, it shouldn't be anywhere close to your max CPU usage.

[noerK]

Yeah i also tested the example page on safari - there it behaves like you said. I am just posting here because i am currently clueless and was hoping there is some common css + safari + gsap mistakes people tend to fall for 😀

Anyways: Here is a screeshot of my CPU-usage while browsing my demo:

 

[ZachSaucier]

Sorry, but without a demo that we can test ourselves I don't know that we can provide any more info.

[noerK]

2 hours ago, noerK said:

Hey Zach,

thanks for your reply. I created a codepen out of your template and the bundles css of my project. I tried removing gsap and scrolltrigger from the sources and just then the CPU load goes down...
Maybe its some faulty css of mine? calculations?

 

Didn't this demo work?

[ZachSaucier]

11 minutes ago, noerK said:

Didn't this demo work?

It does. I recommend that you cut out chunks of your CSS until you find what is causing that  

[GreenSock]

This is totally unrelated to ScrollTrigger - here is proof: 

See the Pen 61e7c1a56395201005e76a7c842c7310?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It has something to do with some combination of having a transition: all applied to your elements (how DARE you do that in a GSAP forum! ) and a "mousewheel" listener and bootstrap. The biggest offenders seem to be the transition on the pseudo element(s) and transition. If you remove the CSS transition, the problem goes away. Might be a Safari bug. 

 

I hope that helps. 

[noerK]

Good morning!

Yeah after Zachs post yesterday i tried cutting out some CSS, started with calc() and var(). Then module by module and somewhen came to the part where i do transition all and background transitions on masked text and pseudos (as you also stated)... I feel bad and i should feel bad i guess  .
Somehow safari doesn't like it .. yeah. As a browser i would probably also dislike it.

Sorry for posting before i really tested everything i could but thanks for all the help!

Be gone transitions!

Have a nice day and rest of the week.