Unstable behavior in Firefox Quantum

[cibulka]

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]

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

[cibulka]

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

[Werbschaft]

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]

@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]

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:

somewebmedia/hc-sticky#42

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

[carasmo]

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.