scrolltrigger Pinned element gets stuck upon reloading in Chrome

[Grene]

Good evening!

 

I'm in the process of creating a simple scrollytelling page with full-screen cards that scroll. The cards are broken up into sections where the background of the cards fade, and where one background can serve multiple grouped cards.

 

I'm using the pin property in ScrollTrigger to have the stacked backgrounds of a section stay fixed until the next section reaches it. However, I'm experiencing some trouble upon reloading the page in Chrome while being scrolled down beyond the first section; the backgrounds of the first section appears to get stuck. The same issue occurs upon resizing the window without reloading.

 

I have not been able to reproduce this behavior in Firefox nor Safari.

 

I have recorded a video of the issue here: https://streamable.com/wiiyhx

 

I'm very new to JavaScript and GSAP (thank you for making it so approachable!), so I'm probably committing more than one mistake in this pen, but I'm not able to spot what exactly is happening here. Could my CSS or template literals be causing issues with GSAP? Or maybe my logic is just no good?

 

Thank you for any advice you may give!

 

See the Pen WNmrwmv by grene (@grene) on CodePen

[GreenSock]

I don't notice any glaring errors, no. And I cannot reproduce the problem you described at all. I tried in Chrome a bunch of times. I scrolled down to the bottom in a page that is NOT inside an iframe (CodePen debug mode), then refreshed. Worked perfectly every single time. Is there a secret to getting it to break? Are you using the latest version of GSAP/ScrollTrigger? 

 

It's just super difficult to troubleshoot when we can't even reproduce the problem at all. 🤷‍♂️

[Grene]

10 hours ago, GreenSock said:

I don't notice any glaring errors, no. And I cannot reproduce the problem you described at all. I tried in Chrome a bunch of times. I scrolled down to the bottom in a page that is NOT inside an iframe (CodePen debug mode), then refreshed. Worked perfectly every single time. Is there a secret to getting it to break? Are you using the latest version of GSAP/ScrollTrigger? 

 

It's just super difficult to troubleshoot when we can't even reproduce the problem at all. 🤷‍♂️

Completely understandable, I should have made sure the behavior actually happens in the pen in debug mode. My mistake!

 

I have done some more digging and realized that the difference maker is the inclusion of a Bootstrap stylesheet. I had neglected to include it in the pen because I wasn't utilizing Bootstrap yet anyways and didn't think it made a difference, but it was included in the HTML file on my computer and apparently it does.

 

Have a look at this pen in debug mode; scroll down to the bottom and then resize the window, even by just a little bit. By doing so I'm able to reproduce the behavior every time. Reloading seems to be more random.

 

See the Pen abMdqLp by grene (@grene) on CodePen

 

Edit: Apparently, debug mode isn't required. Resizing the window with the pen as-is does the same.

[mvaneijgen]

It is probably scroll-behavior: smooth; that Bootstrap adds to something like the body or the html. Try setting scroll-behavior: auto !important;

 

Hope it helps and happy tweening! 

[Grene]

26 minutes ago, mvaneijgen said:

It is probably scroll-behavior: smooth; that Bootstrap adds to something like the body or the html. Try setting scroll-behavior: auto !important;

 

Hope it helps and happy tweening! 

See the Pen PoLZQrv by grene (@grene) on CodePen

 

Adding scroll-behavior: auto!important; to the html looks to have done the trick! Amazing, thank you!

 

Some funny offsetting also looks to be happening to my white start markers upon resizing the window vertically, but that's probably on my start property not being a function. Woops!