Jump to content
Search Community

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

joe.cardella 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

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?

Link to comment
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 2
Link to comment
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

Link to comment
Share on other sites

  • 4 months later...

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

See the Pen rydGwx by vm6ej04 (@vm6ej04) on CodePen

 

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
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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. 

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