ScrollTrigger breaks when "Stop iOS Safari from resizing the window on scroll" fix is applied

[Tonic Creative 2 Likes (Newbie)]

I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here.

When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire.

What can I do to resolve this
In the section: Stop iOS Safari from resizing the window on scroll

 

body, html {
    height: 100vh;
    width: 100vw;
    overscroll-behavior: none;
    overflow: hidden !important;
}
#viewport {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
    width: 100vw;
    -webkit-overscroll-behavior: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

https://greensock.com/docs/v3/HelperFunctions#scrollResize

My simple scrollTrigger on the element is just this but it breaks cause the above CSS

ScrollTrigger.create({
      trigger: '#test',
      start: 'top top',
      // endTrigger: '#otherID',
      end: 'bottom 50%+=100px',
      onToggle: (self) => console.log('toggled, isActive:', self.isActive),
      onUpdate: (self) => {
        console.log(
          'progress:',
          self.progress.toFixed(3),
          'direction:',
          self.direction,
          'velocity',
          self.getVelocity()
        );
      }
    });

 

[akapowl 5,140 Likes (Superhero)]

 

Welcome to the GreenSock forum.

 

First off, I would suggest having a look at ScrollTrigger's normalizeScroll function, which should help with what you are trying to achieve.

 

But as an answer with regard to your scenario: Since your body is not going to be the scroller element anymore in a case as such, you will probably have to define the current element that is now your scroller. This is from the docs:

 

scroller

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

If neither of the suggestions does help in your case, please provide a minimal demo that showcases your issue.

 

I'd also suggest reading up on those threads if you want to stick to your solution as it comes with some side-effects that you might want to consider.

 

 

 

[Tonic Creative 2 Likes (Newbie)]

Thanks for the solutions/links. These help me solve this!