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

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

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

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()
        );
      }
    });