Closed rafegoldberg closed 9 years ago
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 |
---|---|
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?
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.
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
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!
No problem. I am glad it worked for you. Cheers.
Using native
sticky
should only be enabled in browsers that support the nativesticky
position. For example, many versions of Firefox (in my case38.0.1
) don't support it with out enabling some kind of flag. My use case being that I want to use the nativesticky
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!