Why does pre-rendering stop when viewWidth > 1999px

[josiahbrown]

I'm working on a site that incorporates a horizontal scroller similar to this. Only problem is that the panels begin to "jump" onto the screen when the view width is greater than 1999px. To recreate the issue, just go to the codepen link and resize the codepen viewport to be 2000px or greater. Then scroll fast back and forth. You should notice that the panels will not render until on the screen.

 

Now resize to 1999px or less and the issue disappears. Everything looks smooth. Anyone know why/how I can fix this?

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

[Rodrigo]

Hi @josiahbrown and welcome to the GreenSock forums!

 

I'm unable  to reproduce this. My screen also is 1920px width, so I tried using Chrome and Firefox devtools on Ubuntu 22 and everything is working as expected.

 

Also give a try to the debug URL (no iframes) just in case:

https://cdpn.io/pen/debug/YzygYvM

 

If you could provide more details like browser, version, OS, etc. in order to dig a little more on this. It'd be super helpful if you tell us if you are using devtools or an actual screen that's wider than 2000px.

 

Sorry I can't be of more assistance.

Happy Tweening!

[josiahbrown]

@Rodrigo thanks for the reply! I'm working on a 4k monitor and the issue does still appear using that debug URL. I am unable to reproduce on any screen that is smaller than 2000px wide. Seems to happen on both Chrome and Safari from what I can tell. Haven't tested other browsers yet.

[GreenSock]

If I remember correctly, someone else ran into something similar a while back and it had absolutely nothing to do with GSAP - it was purely a rendering problem with the browser. You can open Dev Tools and see that GSAP is setting the values properly, but the browser was just refusing to actually paint the pixels in certain conditions. It was almost like the browser was trying to do some kind of performance optimization by limiting the total number of pixels that a texture can have, and when you go beyond that threshold it exposes the browser's bug. I don't think there's anything we can do. And again, it's completely unrelated to GSAP. 🤷‍♂️