Windows 10 reached EOS (end of support) on October 14, 2025. If you are on Windows 10, see this article.

Avatar for Username

Søg i Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Læs mere
Denne tråd blev arkiveret. Stil et nyt spørgsmål, hvis du har brug for hjælp.
Løst Arkiveret

CSS position: sticky fails on a long parent

Firefox Browse
Chrispink replied
Chrispink
Chrispink

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?

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?
Chrispink
Chrispink Spørgsmålsstiller
Læs dette svar i sammenhæng

Valgt løsning

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

Alle svar (4)

Chrispink
Chrispink Spørgsmålsstiller

I can't edit the original but it looks strongly like it works for one viewport height.

TyDraniu
TyDraniu
  • Top 10 Contributor

Is it something like this testcase? https://codepen.io/brandonmcconnell/pen/ZEZaozw/5952a63864a7d7167c788cec6e03b487

Chrispink
Chrispink Spørgsmålsstiller

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.

Chrispink
Chrispink Spørgsmålsstiller

Valgt løsning

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