iOS10 is jank

[scott-thrillist]

Been having issues with Waypoints in the new iOS10 update so I started to use this plugin. It looks & works great on desktop and on the Chrome mobile emulator, but on an actual iPhone with iOS10 headers simply don't stick once you scroll passed. Not sure what the Apple dev team did but whatever it is seems to really limit fixed positioning on elements during a scroll event.

Anyone else seeing the same thing?

[nealmattox]

Same issue happening for me. Even looking at the demo site here on GitHub on iOS the headers won't stick unless I pause scrolling. Then the fixed items will flash to their fixed positions, but then go away again if I scroll up or down the page. This bug basically renders the plugin unusable for any projects at the moment.

[Conal-Birtles]

I managed to resolve this issue by adding the following CSS :

.sticky-element { transform: translate3d(0,0,0); }

For what it's worth, I also tried :

.sticky-element.scroll-to-fixed-fixed { transform: translate3d(0,0,0); }

But it didn't like that one bit.

Obviously, you'll need to change the selector to whatever you're using.

https://stanko.github.io/ios-safari-scoll-position-fixed/

EDIT: Looks to work sometimes but not others. I'll post again if I can nail down the issue.