scrollTo plugin bug with iOS because of fixed positioned items

[Learning]

Hi guys,

Actually, I have already solved this, but I would still like to post this in case anyone else faces the same issue.

The issue,

I have found that scrollTo window 0 jerks or stops on iOS devices. Works fine on desktops, Androids, etc.
 

I searched the forums and found a few suggestions to solve this,

- autoKill: false
- autoRound: false
- force3D: true 

I have added all 3 to my statement, but it didn't solve the problem.
 

After much digging around, I found that it is because my scroll to top button is a fixed object which I have cornered to the bottom right of the screen, and somehow iOS conflicts scrolling to top with this fixed position div (I have no idea why). The way I opted to solve this is to set my button to autoAlpha 0 when it is clicked, and when it has finished scrolling to top, I fade the button back in again.

 

Cheers!

Hope it helps anyone who encounters this.

[Jonathan]

Hello @Learning and welcome to the GreenSock Forum!

 

This is a browser bug in iOS, not a GSAP bug. iOS is notorious for webkit bugs when it comes to CSS position fixed and the scrolling event. Sometimes you can get around this iOS fixed position scroll bug with  html, body { overflow-y: auto; -webkit-overflow-scrolling: touch; } . But you would have to test.

 

But this is a well known iOS fixed position scroll bug. Even Apple recommends not to use CSS position fixed.

 

Modify code that relies on CSS fixed positioning

 

Quote

CSS fixed positioning works in Safari on iPhone and iPad, but not as you might expect. While elements that use fixed positioning in Safari on OS X always stay on screen, elements that use fixed positioning in Safari on iPhone and iPad can end up offscreen as users zoom and pan the webpage.

Why does this happen?

By definition, the containing block of a webpage element that uses CSS fixed positioning is the viewport. This means that when you set position: fixed with a bottom and right value of 20px as shown in Listing 4, you have "fixed" the position of an element 20 pixels above the bottom edge of the viewport, and 20 pixels from the right edge of the viewport.

In Safari on the desktop, the viewport is analogous to the window — as you resize a window, you are resizing the viewport. As you scroll, you are scrolling the viewport. Hence, in Safari on OS X, the element always stays on screen.
 

Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.

 

Of course this might not stop you from using CSS position fixed. It used to work normally in iOS 7 but now is wonky in iOS 8. CSS position fixed has issues reporting the proper values when in portrait versus landscape mode when in mobile.

 

Thanks for posting your solution