JMischka

scrollTo not working on Mobile

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

Share this post


Link to post
Share on other sites

Do you have a reduced test case we can look at, perhaps in codepen? I haven't heard about any problems with iPhones, nor can I think of why that could possibly happen, but I'm curious. It'd be super helpful to see your scenario (with as little code as possible).

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.