leafo/sticky-kit

Sticky div appears/disappears when scroll down - Ipad only

Opened this issue ยท 12 comments

Hello,

Sticky elements work perfectly, but I have a problem on my Ipad.
The problem happens in Safari, Chrome, but also Firefox (so probably not a webkit issue?) :

When I scroll down => element becomes sticky.
It dissapears during 1/2 seconds and comes back.

And if I scroll to quickly, it happens again.
I need to wait (not scroll) to make it reappearing.

It dล“sn't seem to happen when I scroll down slowly.
But it's hard to describe, very strange behaviour.

I saw posts #31, #180 and #189, and I tryed many advices but nothing changes.
And in my case there is no problem with desktop version.

Can't test with an other tablet than ipad, but do you think there is a "touch problem" ?
I cannot identify the problem...

Thanks in advance for your help !

I realize I have the same problem with the black navbar on your website http://leafo.net/sticky-kit/

Having the same issue, except on the iPhone 6 as well (most likely other versions). Seems to only happen when the address bar is appearing/disappearing and stickykit doesn't know how to handle that. When initially scrolling down the page the sticky nav will disappear as the address bar removes itself, and only reappear after coming to a complete stop. Then, scrolling down works fine. However, scrolling back up (which starts to reveal the address bar), the nav bar disappears and reappears as described above.

Did anyone get a fix or workaround for this ?

Nothing I could figure out, unfortunately.

Ditto.

Bump it up +1

Check out this page: https://stanko.github.io/ios-safari-scoll-position-fixed/

Applying the CSS styling fixed my problems.

As for it being the "correct" solution, I'm not sure, but it works!

hpm76 commented

@theonlyriddle would you kindly share an implementation example? I am totally unable to make it work. Thank you in advance!

This is not a sticky-kit issue per se, more a feature of iOS 9+ when it encounters fixed elements. Check out my solution on SO: http://stackoverflow.com/a/43188105/3375005

@nternetinspired thank you, It really works

@nternetinspired That worked for me, cheers.

ro0t commented

@theonlyriddle I used the same solution and it fixed the sticky flickering issue on Safari for me!