How to make sticky table rows in Safari

Question

I'm trying to display a table which displays some grouped data.

The header should stick (at the top of the viewport), and also some table rows that contain the group titles.

For simplicity, I've created the following example on Codepen: https://codepen.io/andreivictor/pen/RwZRZav

The code I've tried is:

td.sticky {
  background: red;
  color: white;
  position: sticky;
  top: 50px;  // this is the header height
}

Which works well on Chrome & Firefox.

The problem is that it doesn't work in Safari (tested on Safari v14); neither in Safari mobile. See the screenshot: https://i.imgur.com/8NEgPYB.png - the row is sticky - but the top position is different (relative to the top of the table - and not to top of the viewport).

Answer 1

According to MDN

sticky

.... This value always creates a new stacking context.

My best guess is that safari takes into consideration the stacking context from previous position: sticky element (so the table header) and positions the .sticky 50px top from the previous position sticky (and not from the end of the container) or something similar (I personally think docs are kind of vague regarding this so it doesn't seem like a way is necessary wrong) but is a shame they act differently.

This post also seem to suggest that stacking sticky positioned elements on Safari is kind of weird:

...Particularly Sifiari’s ability to double sticky a section and element.

(where Sifiari’s is Safari's)

You could check the discussion in the last link, but I'm not sure that you will find a better fix than using different top values. What you could try though is using an option like

_::-webkit-full-page-media, _:future, :root .safari_only { ...

or some other option suggested by is there a css hack for safari only?