Important Notice: We're experiencing email notification issues. If you've posted a question in the community forums recently, please check your profile manually for responses while we're working to fix this.

Avatar for Username

Search 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.

Learn More

CSS position: sticky fails on a long parent

  • 4 iimpendulo
  • 0 inale ngxaki
  • 74 views
  • Impendulo yokugqibela ngu Chrispink

Chrispink
Chrispink
more options

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?

Isisombulu esikhethiweyo

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

Funda le mpendulo kwimeko leyo 👍 2

All Replies (4)

Chrispink
Chrispink Umnini wombuzo
more options

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

Helpful?

TyDraniu
TyDraniu
  • Top 25 Contributor
more options

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

Helpful?

Chrispink
Chrispink Umnini wombuzo
more options

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.

Helpful?

Chrispink
Chrispink Umnini wombuzo
more options

Isisombululo esiKhethiweyo

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

Helpful?

Buza umbuzo

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.