Safari not playing nice with ScrollSmoother and Lightbox

[Mattrudd]

Hi,

 

On my production site I'm using ScrollSmoother and a range of ScrollTriggers. All is well in Chrome, but in Safari, when the Lightbox playing a showreel is opened and then closed, the page stops scrolling.

 

The Lightbox has to sit outside the smooth-content container as it needs to be fixed, but that seems to mess with Safari's rendering.

(Click blue box to open Lightbox, then click again to close - the production site has 'play' and 'exit' cursors!)

I added a  ScrollTrigger.refresh(); on line 132 of the pen, and that fixes the issue in this demo, but on my production site when I add the same 'fix' the page does scroll again but at the expense of cutting out the page content above the the Lightbox section.

 

I obviously can't share all my page code to showcase this issue - so imagine Spacer 1 and 2 not appearing in the demo after the Lightbox exit, with the new top-of-page being the video block.

Any pointers for troubleshooting this? I've tried manually calling refresh after each ScrollTrigger instance.

 

Maybe worth noting that everything functions fine in Safari when ScrollSmoother is removed - so thinking I'm likely doing something wrong in the initial ScrollSmoother setup (which is the same as in this demo).

As ever, any pointers from you brilliant folk will be gratefully received! 

See the Pen XWqwqPj?editors=1111 by matt-rudd (@matt-rudd) on CodePen

[GreenSock]

Safari has some major bugs when it comes to scrolling which have been reported and acknowledged. This is unrelated to GSAP/ScrollTrigger. SUPER annoying, I know. Apparently if you use a position: fixed element in a certain scenario, it'll absorb pointer/wheel events even when it totally shouldn't. We've already put a workaround in ScrollSmoother that happens when you refresh(). The problem in your demo was that you were calling ScrollTrigger.refresh() while your fixed-position element was still there. You should just wait until your exit animation finishes. 

tl = gsap.timeline({
  onComplete: () => ScrollTrigger.refresh()
});

Seems to work for me. 

[Mattrudd]

Thanks @GreenSock  - I tried calling refresh in an onComplete as you suggested - it does enable scroll but on my production site I'm getting the same scroll position jump and weird loss of content above the showreel block... as if Safari has decided to set a new page top limit after refresh. 

 

Annoying is the word - didn't for a second think it was anything other than a Safari bug!

 

May just have to embed the video in the page for Safari.

[GreenSock]

4 hours ago, Mattrudd said:

Thanks @GreenSock  - I tried calling refresh in an onComplete as you suggested - it does enable scroll but on my production site I'm getting the same scroll position jump and weird loss of content above the showreel block... as if Safari has decided to set a new page top limit after refresh. 

 

Are you using 3.11.3 on your production site? Please make absolutely sure you've got the latest GSAP/ScrollTrigger/ScrollSmoother files there. 

[Mattrudd]

Hi @GreenSock, haven't yet had chance to make sure everything's up to date - I know I'm using the unpkg.co distribution for the latest GSAP main, but will check ST and SS etc.

 

A further quirk is while trying to diagnose any of my own errors by rebuilding the site in a Codepen, it ran on Safari flawlessly... so wondering whether it's an issue with the Live Server plugin I'm using in VS Code.  If only all code was as good as GSAP!

Anyway - thanks again for the nudge about the refresh placement. 

 

[Rodrigo]

Hi @Mattrudd,

 

I ran into some issues with VS Code's live server sometimes because sometimes assets are loaded too fast (something in real life you don't get because you need to wait for a server response). Try using the network throttling in order to slow down the loading process and see how that works:

https://www.debugbear.com/blog/chrome-devtools-network-throttling

 

Happy Tweening!

[Mattrudd]

Great tip, thanks @Rodrigo 🙌