Jump to content
Search Community

ScrollTrigger / Sticky not working in Safari

amitr95 test
Moderator Tag

Recommended Posts

I have a section which "pins" once a user scrolls to it. My code works in Chrome, however in Safari, it doesn't pin at all (see GIF below). 

 

Upon inspecting in Safari, I couldn't see any errors. However, I did see that, when the inspection window pops up (and the screen essentially resizes), the pinning them did start to work (though it wasn't consistent). Based on this, I tried ScrollTrigger.refresh(); to help give it a kick, but no luck.

 

Unsure why this ScrollTrigger is not working in Safari (Version 16.2)?

 

demo.gif

See the Pen WNgMGRo by amit_rai95 (@amit_rai95) on CodePen

Link to comment
Share on other sites

Are you saying that your CodePen demo breaks in Safari as well? It seems to work perfectly for me in Safari. Is there a secret to reproducing the problem or does it only happen on your site?  We really need to be able to see it happening in context, so it would be great if you could provide a minimal demo that clearly illustrates the issue (maybe you did and I'm missing something obvious). 

Link to comment
Share on other sites

Hi @GreenSock - The codepen works fine in Safari browser, but I have the same JS on my staging site as the codepen and it doesn't stick.

 

If you open this page in Safari, you will see the issue when scrolling down.

 

Besides the markup in the codepen (which has been minimised for demoing purposes), the CSS and JS on my instance for the ScrollTrigger are the same.

Link to comment
Share on other sites

heya, so I'm pretty sure this is a something to do with when your scrolltrigger code/DOM is loading because if I slightly resize the window (triggering a post DOM loaded refresh) the element sticks as expected.

 

Quote

tried ScrollTrigger.refresh(); to help give it a kick, but no luck.

When are you trying to call refresh? Are you sure it's after all the DOM has loaded in?

Link to comment
Share on other sites

Hi @Cassie - The results you're seeing on resize, is that consistent? 

 

For example, whenever I reload the page (and clear cache), it never sticks. I have tried resizing the window, but it still doesn't stick (which in your instance, does).

 

However, when I pop up the inspect window on Safari, and untick and retick some of the CSS on .fixedPanel.active, it then starts to tick.

 

I'm calling ScrollTrigger.refresh() at the very bottom of my JS for that module. Have tried it in jQuery and Vanilla JS:

 

gsap.registerPlugin(ScrollTrigger);

let recentlyReset;
let showAnim = gsap
  .from(".fixedPanel__body", {
    height: 0,
    paused: true,
    duration: 0.3,
    onComplete: resetST,
    onReverseComplete: resetST
  })
  .progress(1);
recentlyReset = false;

let panelST = ScrollTrigger.create({
  trigger: ".fixedPanel",
  start: "top 85px",
  end: 99999,
  toggleClass: "active",
  markers: true,
  invalidateOnRefresh: true,
  onEnter: () => !showAnim.isActive() && showAnim.reverse()
});

function resetST() {
  recentlyReset = true;
  ScrollTrigger.refresh();
}

// $(document).ready(function(){
//   ScrollTrigger.refresh();
// });

// document.addEventListener("DOMContentLoaded", function () {
//  ScrollTrigger.refresh();
// });

 

Link to comment
Share on other sites

Hey @Cassie,

 

It seems we're experiencing two different results on the same page. See my experience where I performed the same steps as your video below.

 

https://i.imgur.com/rRl7L5b.mp4

 

I also added the following at the end of my code:

 

document.addEventListener("DOMContentLoaded", function () {
  gsap.delayedCall(5, () => ScrollTrigger.refresh());
  console.log("test");
});

However, after waiting 5 seconds and then scrolling, the same issue. 

 

However, in some instances it did pin after waiting 5 seconds. But, then reloading the page and waiting 5 seconds again, the section never pinned again.

 

Just wondering if there's something fundamentally wrong with my setup, but again, it works perfectly fine on Chrome, just in Safari it causes issues.

Link to comment
Share on other sites

There must be something else going on in your setup. It's almost impossible for us to troubleshoot without a minimal demo. Can you provide a CodePen that illustrates the issue? Do you have other code in your site that's doing things differently in Safari? Like applying a transform to the container or something? 

 

You've definitely got some kind of odd issue when the pinning happens because there's a flash of content that quickly goes away. None of this sounds like anything I heard of before in Safari, so I'm relatively confident it's some problem with your setup. It could be CSS, markup, a 3rd party library interfering with something...it's very difficult to say without a minimal demo

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...