Jump to content

Tonic Creative

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

Go to solution Solved by akapowl,

Recommended Posts

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;


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

      trigger: '#test',
      start: 'top top',
      // endTrigger: '#otherID',
      end: 'bottom 50%+=100px',
      onToggle: (self) => console.log('toggled, isActive:', self.isActive),
      onUpdate: (self) => {


Link to comment
Share on other sites

  • Solution


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.




  • Like 1
Link to comment
Share on other sites

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

  • Like 2
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.