Possible ScrollTrigger bug on IOS

[Aitor]

Hello, I am developing a site and my client reports a bug that only occurs with IOS (iPhone, iPad). It occurs in all browsers (Firefox, Chrome, Opera, DuckDuckGo and Edge). On Android and desktop it works.

 

This is the site: https://nmiai.e451.net/projects/

 

The bug is the following: if the user scrolls down, the browser, on its own, scrolls to the top again. I attach a video where you can see how the user scrolls down and the browser returns to the starting point.

 

 

It is difficult for me to see it because I do not have devices with IOS but together with my client I have managed to narrow down the problem: It appears with a function that uses ScrollTrigger. The function couldn't be simpler and I can't see an error in the code:

 

import gsap from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

export function fades() {
  const fades = document.querySelectorAll('.fade');

  fades.forEach(function (fade) {
    gsap.from(fade, {
      scrollTrigger: {
        trigger: fade,
        toggleActions: 'restart none restart none',
        markers: false,
      },
      y: '50',
      opacity: '0',
      duration: '2',
      ease: 'power4.out',
    });
  });
}

 

Removing that function the error goes away. Is it possible that it is a bug in ScrollTrigger with IOS?

[alig01]

Hey,

 

I could also reproduce it on my iOS device. When I took a quick look at the page with dev tools I noticed that you are using scroll-smooth which could cause the issue. A similar problem is discussed in this thread.

 

  

On 9/23/2022 at 4:00 PM, SteveS said:

To my knowledge, you should avoid combining ScrollTrigger and scroll-behavior: smooth. The reason is that you don't want the two fighting over what the true scroll behavior is, and when you use scroll-behavior smooth, it is handled by CSS and not accessible in the same way to GSAP.

 

I hope this leads you in the right direction to fix the problem.

[Aitor]

Yes! Thank you so much. I've been around this for hours. 🙏