Jump to content
Search Community

scrollTo not working on Mobile

JMischka test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  scrollTo plugin works great on desktop and in most mobile scenarios.  However, I'm running into problems when testing for iPhones X (on BrowserStack).  I have a restart button that scrolls the window back to the beginning.  The problem I'm finding is on iPhones X when scrolling backwards the browser address and phone navigation icons appear/are revealed and it appears to halt the scrolling progress.  I have autoKill:false set which corrects the issue in most cases, but for iPhones X it seems to not work.  Any thoughts?

 

function handleMobileRestart(e) {
    e.preventDefault();
    function closeWindow() {
        dateWindowWrapper.classList.remove('open-window');
        introCard.classList.remove('actify');
    }
    TweenMax.to(window, 4, {scrollTo:{y:0, autoKill:false}, ease:Expo.easeOut});
    setTimeout(closeWindow, 2000);
}

image.png

Link to comment
Share on other sites

Hi Jack.  thanks for the response back.

Let me prepare something and post to Codepen.  Again, seems to only happen when I'm testing (through BrowserStack) for iPhones X.  I set autoKill:false which corrected the issue in every other case except in this one test case scenario.   It may be something else within my code (I'm not ruling that out) or simply a test quirk, but I'm racking my brain at the moment trying to figure it out.

Thanks again, Jack for the reply back.  It's much appreciated.  
When I have something up on a Codepen I'll drop a line again. :-).

  • Like 1
Link to comment
Share on other sites

Hi Jack.  Thanks again for getting back to me.

So after days of trying out different ways of firing my event listeners and reading various posts all over the web I finally figured out the problem.  As it turns out, it had nothing to do with Greensock or the scrollTo plugin.  Good news!  The issue is specifically an iOS Safari issue on iPhone X.  Perhaps known by some (not by me) the issue was the location of where I had my button placed.  It was in the lower corner of the viewport so that when it was ‘clicked’ the iPhone’s action bar (only in Safari) interfered with my handler function.

 

The solution is frustratingly simple.  Move the button from the bottom of the viewport, make sure to have { autoKill:false } set and everything should work as expected.  At least it did in my case.  From what I’ve read, place buttons that have functionality associated with them above the lower 10% of the viewport and one shouldn’t encounter any glitches.  As I said, seemed to only happen with iPhones X. 

There are other workarounds that people have written about, but… This is simple. Hopefully, I’ve saved someone a few hours.

   

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 5 years later...

I know this is an old post, but this worked like a charm.

Safari seems to have some differences in the way that it handles the scrollposition's values (given the way the viewport is calculated), causing the autokill: true to be forcibly called. I just set it to off for safari and now it works fine.

I also want to mention a fix for a similar problem i had a month ago, and it's related to the metadata tags of the website.

Certain gsap scrollTo features seem to break unexpectedly on Safari ( in my experience, using any of the features that use translate() ), but another forum member had written something along the lines of needing some specific metadata tags in your html head.

 

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

Thanks again for the fix.

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...