Trigger on wrong position (only in Safari & Firefox)

[the_gmo]

I have an element that contains a large image, which pins in the center of the screen (trigger: center center), scrolls the entire image and carries on (see attached Codepen*). On Chrome (and Edge) it is working exactly as intended every time. On Safari and Firefox, it doesn't in most cases. It doesn't pin, and leaves a large space underneath the element.

 

After activating the markers I noticed that it seems the trigger is not set to the parent (the pinned element) in those browsers, but to center of the containing image. Thus way too far below. However, if I resize the browser, even by a pixel, it snaps to the right position and works.

 

Any ideas in which area I could search for the problem if it only works after I resize the browser?

 

I have tried to deactivate ScrollSmoother, I have tried without matchMedia (even though I really need it for this element), the problem remains. 

 

* the Codepen works fine, even in Safari or Firefox. This is just to show what I'm doing and it replicates the code of the site as close as it gets. 

See the Pen QWxvygG by the_gmo (@the_gmo) on CodePen

[Rodrigo]

Hi,

 

I assume that this is happening on a Mac machine, right? I tested this in Ubuntu 20 and 22 and can't see any issue in the example.

 

I see that the codepen has the latest version of GSAP so that's not the issue. What I'm seeing is that you're not wrapping your content in the suggested setup in the docs:

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
  </div>
</div>

Give that a try an let us know how it works. Sorry I can't be of more help but I'm not seeing any issue here.

 

Perhaps other users could chime in and give more feedback.

 

Happy Tweening!

[mvaneijgen]

13 hours ago, the_gmo said:

It doesn't pin, and leaves a large space underneath the element.

But the markers are still correct in your 'real'  version?

 

If it's not happening in Codepen it is probably something else interfering, I would disable everything else and see if the issue still persists. If not enable things one by one to find the culprit. 

 

I also can see nothing wrong in your pens code, maybe the distance variable is calculated weird in Safari and Firefox? (but then I would figure it would also happen in the pen), but you can still try loggin the number to see.  And/or maybe round the numbers? And as @Rodrigo stated, maybe thy wrapping it in the correct elements, that is the only warning I see in the browser "ScrollSmoother needs a valid content element."

 

Hope it helps and happy tweening!

[the_gmo]

Thanks for the replies. I didn't really had a chance to take a lot through the day.

 

17 hours ago, Rodrigo said:

 

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
  </div>
</div>

Give that a try an let us know how it works. Sorry I can't be of more help but I'm not seeing any issue here.

I just forgot those on the Codepen example, the live site has those wrappers.

 

9 hours ago, mvaneijgen said:

But the markers are still correct in your 'real'  version?

Whenever it doesn't work, the markers are somewhere in the empty space below the element. 

 

After a resize a snaps to the right position. The marker is in the correct position and the element works as intended.

 

I logged the variables, they are the same in both browsers. I tried with rounded numbers, still same. I tried Greensock via cdn, still the same.

[the_gmo]

UPDATE: I seem to have found the villain. I have a slick slider on the same page. Once I remove this script I no longer get the problem. I will add one to the Codepen tomorrow and see if I'll get the same the problem there.