Avatar for Username

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.

Learn More

This thread was archived. Please ask a new question if you need help.

CSS position: sticky fails on a long parent

  • 4 replies
  • 0 have this problem
  • 171 views
  • Last reply by Chrispink

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?

Chosen solution

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

Read this answer in context 👍 2

All Replies (4)

Chrispink
Chrispink Question owner

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

TyDraniu
TyDraniu
  • Top 25 Contributor

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

Chrispink
Chrispink Question owner

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 Question owner

Chosen Solution

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