Issue using native sticky in Firefox

[rafegoldberg]

Using native sticky should only be enabled in browsers that support the native sticky position. For example, many versions of Firefox (in my case 38.0.1) don't support it with out enabling some kind of flag. My use case being that I want to use the native sticky positioning on iOS but not in Firefox – or any browser that doesn't actually supported it for that matter...

Great work on the plugin; thanks guys!

[rafegoldberg]

So to illustrate the issue I'm getting in Firefox, here's a side-by-side of the difference. Using fixed positioning (at right) achieves the desired results, where the former definitely is doing something weird!

Native Sticky	Position Fixed

[rafegoldberg]

It also seems to be happening in Safari 9.0... My guess is that whatever feature detector your using – I just quickly checked CIU for Firefox and Safari – claims these browsers support it, but their implementation is laggy or weird. Is there any way to account for this? Maybe there's some way in the options to be a little more specific about when to use native sticky positioning and when not? Or maybe I'm just screwing something up?

[bbarakaci]

I checked the demo pages with Firefox 40.0.3 (I don't have 38 anymore) and Safari 9.0. Things works as expected in both browsers. They use native sticky. Please do the same with your browsers to see if there is any problem on those pages.

Please check the position sticky caveats section of readme to see if there is any layout rule disturbing sticky position. https://github.com/bbarakaci/fixto#position-sticky-caveats

If you provide a running example demonstrating the problem, i can have a look.

Fixto applies position sticky to a dummy element to see if the rule is supported or not. Once browser claims support, rest is up to browser. Any browser detection to apply fixto with different options should be done by the developer.

Thanks.

[rafegoldberg]

Thanks for getting back to this so quickly @bbarakaci. I must have ignored the Caveats section of the readme; I definitely have some overflow and height values going in my CSS. I'm going to check it out and make sure they're not the culprit, but in the meantime you can see a live version of the site here

[rafegoldberg]

Okay, I figured it out. As you'd suspected @bbarakaci I was applying an unsupported overflow value. My SCSS looked something like this:

.parent {
   overflow: hidden;
   .&__open {
      overflow: auto;
      .fixTo-elem { /*etc*/ }
   }
}

When I changed the overflow property from auto to initial —  :tada::boom::tada:  — everything works like a charm. Fantastic.

Anyway, now that I'm done breaking things just want to say thanks for for pointing me in the direction of these caveats. And even more thanks for this dope little plugin!

[bbarakaci]

No problem. I am glad it worked for you. Cheers.