CSS position: sticky fails on a long parent
MacOS 14.6.1 Firefox 31.0.3 (aarch64)
I have a long (19000px) table with a sticky row at the top. On Safari or Chrome it works fine. On Firefox it works for around 800 px and then becomes 'unsticky'.
Is this a known behaviour?
Vybrané riešenie
I did pick up one thing from your codepen which has resolved the issue. It's a question of the semantic markup. If I wrap the header rows in <thead> then the sticky behaves correctly. (although removing this doesn't break the codepen). I'm happy with that as correct semantics is never a bad thing ;-)
Thanks again
Čítať túto odpoveď v kontexte 👍 2Všetky odpovede (4)
I can't edit the original but it looks strongly like it works for one viewport height.
Is it something like this testcase? https://codepen.io/brandonmcconnell/pen/ZEZaozw/5952a63864a7d7167c788cec6e03b487
No, this works perfectly (even if I duplicate the rows). Although the structure and CSS are very similar.
So the issue is somewhere else or more complicated.
I will try and duplicate my situation in a codepen. At the moment it's in a private part of a website.
Thank you for the help.
Vybrané riešenie
I did pick up one thing from your codepen which has resolved the issue. It's a question of the semantic markup. If I wrap the header rows in <thead> then the sticky behaves correctly. (although removing this doesn't break the codepen). I'm happy with that as correct semantics is never a bad thing ;-)
Thanks again