sticky-kit
sticky-kit copied to clipboard
leafo
Unstable behavior in Firefox Quantum
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?
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:
- https://stackoverflow.com/questions/47618583/position-sticky-overlay
- https://stackoverflow.com/questions/47618271/position-sticky-scrollable-when-longer-than-viewport
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;
@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.
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.
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.