search

leafo / sticky-kit

A jQuery plugin for creating smart sticky elements
http://leafo.net/sticky-kit
2.9k stars 517 forks source link

Unstable behavior in Firefox Quantum #252

Open cibulka opened 7 years ago

cibulka commented 7 years ago

Sticky Kit doesn't seem to handle new Firefox Qantum well, at least not in my projects. Check choir.cz for example.

Sticking happens after a noticable delay and whole experience is pretty choppy. I've tested this in OSX and Windows.

I suppose that is because of browser's new "Async Pan/Zoom" feature: https://hacks.mozilla.org/2017/11/async-panzoom-apz-lands-in-firefox-quantum/.

Have you found some way around this?

carasmo commented 7 years ago

Yep, happening with me. Don't even know where to begin to correct this.

cibulka commented 7 years ago

As this package seems to be abandonned (last commit in March, no replies in the issue forum), I've decided to move to the native position: sticky for most of my use-cases. Cheers to @leafo though, it was a good run!

It's not the easiest transition. position:sticky does not do everything I need it to do and also has some serious quirks (such as not being able to use overflow: hidden on its parents).

I've created 2 questions on StackOverflow, maybe they will help somebody:

Werbschaft commented 6 years ago

It's very easy to fix ... add this to the CSS (keep Vendor Prefixes in mind). "Will change" is optional and not required as I have seen in tests

transform: translate(0, 0);
transform: translate3d(0, 0, 0);
will-change: position, transform;
carasmo commented 6 years ago

@WS-Theme -- that is already in my CSS for the parents and children to prevent issues with delay in IOS (it forces hardware acceleration). It hasn't helped with FireFox.

carasmo commented 6 years ago

I'm using hcSticky, works great! I wrote up a work around, since the FireFox thing is still an issue if the sticky element is stuck to the top:

https://github.com/somewebmedia/hc-sticky/issues/42

Download the zip there, plenty of examples and how to implement.

carasmo commented 6 years ago

Yes, I confirmed that with hcSticky that there is no jumpiness when the element you're sticking is not smacked up to the top of the viewport.