joe.cardella

Is there a problem with the scrollTo plugin on iOS 10?

Recommended Posts

Guys

 

I have a problem where I am using the scrollTo plugin and it does not scroll at all on iOS 10 in Safari, Firefox, and Chrome at all.

 

As a test to see if this problem could reproduced outside my code base, I loaded up http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/ in iOS 10 and the codepen example on that page also fails in iOS 10 works fine on Desktop browsers.

 

Any ideas what is going on? Are you aware of this issue?

Share this post


Link to post
Share on other sites

I had to play around with my main element and body element's overflow property to fix.

Share this post


Link to post
Share on other sites

I've noticed this as well, can you elaborate on the fix you added? Which overflow property worked for you?

Share this post


Link to post
Share on other sites

I'm so sorry about the delayed response. Slipped through the cracks. 

 

The problem in the link you provided is unrelated to ScrollToPlugin - it's actually codepen. Here's the error being thrown: 

 

"Error while parsing the 'sandbox' attribute: 'allow-modals' is an invalid sandbox flag."

 

I guess iOS doesn't like that. Weird. If you go to the "debug" version of that link so that there's no codepen iframe, it seems to work great.

 

If you're still having trouble, though, please provide a reduced test case that we can peek at and we'd be happy to look into it. Oh, and I know that historically iOS has had bugs that caused it to mis-report the current scroll position and that'd trigger the autoKill in the tween (because it's acting like the user tried scrolling the page manually, so the tween releases control for better UX). In other words, when ScrollToPlugin sets the scroll position, on the very next tick it says "hey, are you still where I set you? If so, I'll proceed; if not, I'll kill that part of the tween". You can disable this feature by setting autoKill:false in your scrollTo vars like:

TweenLite.to(window, 1, {scrollTo:{y:"#element", autoKill:false}});
  • Like 1

Share this post


Link to post
Share on other sites

Hm, I just tried it on two iOS devices and it seemed to work fine (both iOS 10). I couldn't detect any problems at all. Any particular instructions for how to reproduce the problem?

Share this post


Link to post
Share on other sites

Hey, thanks for checking it out. Just so we're on the same page, here is a new link http://test-chase-erwin-com.php5.hostingweb.co.uk/fabrics

 

When you tap on a fabric swatch, the details animate down below and once the details have finished animating the page should scroll up so the top of the details section is flush with the bottom of the nav. Then the reverse after you close the details section, once closed the page should scroll to the top of the fabric swatch. This works as it should on desktop seems broken on iOS

Share this post


Link to post
Share on other sites

Yep, we're on the same page. Totally. Works perfectly on my iOS 10 Safari. Anything in particular I need to do to break it? Can anyone else reproduce the problem on their iOS device? 

Share this post


Link to post
Share on other sites

Don't get me wrong, I'd be super happy if I'm the outlier. Just in case, I wanted to show what I'm seeing vs. what I'd like to see, have shown a couple of screenshots in the attached PDF. Are you seeing the same as the two screenshot on the right?

 

scrollTo.pdf

Share this post


Link to post
Share on other sites

Yep, exactly. I'm seeing "how it should look" on every iOS device I've tried. Very odd that you're not seeing the same thing. Makes me wonder if it's something specific to your device. [scratching head]

Share this post


Link to post
Share on other sites

Almost 6 months after that I'm facing a similar problem...
Initially on the project I was working on, the

scrollTo:{#idName}

Didn't do anything, later on I realised I have to be on version 1.90 or later, so the scrollTo works great after that.

NOT until I test it on iOS 10.2.1 on my iPhone 6, I've stripped down everything to make it as simple as possible, the scrolling is choppy, and stops very often in the middle of scrolling.

 

Here's the codepen

https://codepen.io/vm6ej04/pen/rydGwx

 

Any idea...?

 

The simulator on Mac works, but not on the actual phone.

There isn't any error in the console, I don't know where to debug is from..

Here's a video recording of what I'm talking about

https://youtu.be/03lck9Bc5SU

Edited by vm6ej04

Share this post


Link to post
Share on other sites

Almost 6 months after that I'm facing a similar problem...

 

I have the same issue on iOs as vm6ej04. The scroll only finishes sometimes. Most of the time it just stops somewhere abruptly on its way. Just like you can see on his codepen/youtube link. 

Share this post


Link to post
Share on other sites

Hey @Chris. Are you seeing that problem even with autoKill:false?

 

Sure sounds like a bug in the browser or something. Very odd. Wish I could reproduce it somehow.

  • Like 2

Share this post


Link to post
Share on other sites

Hey @Chris. Are you seeing that problem even with autoKill:false?

 

Sure sounds like a bug in the browser or something.

 

Oh, yes! I just added it and now the scroll works perfectly every time. Sorry, I missed that part earlier. Thanks @Jack!

  • Like 2

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.