search

bigspotteddog / ScrollToFixed

This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
http://bigspotteddog.github.com/ScrollToFixed/
MIT License
1.81k stars 531 forks source link

iOS10 is jank #226

Open scott-thrillist opened 8 years ago

scott-thrillist commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

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.