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.sstatic.net/08o4L.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).

Poi

So just to make sure: if you use top: 0 instead of top: 50px in your sticky class is working on safari? – Clari

yes, it seems that a solution would be top: 0- for safari / top: 50px - for other browsers. But it looks like some kind of hack and I'm also trying to understand why this happens on safari. – Poi

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?

Clari

Answer 2

Maybe this would help: How to fix issues with CSS position sticky

Cymene

Please quote the relevant section from the cited website. This will help the asker (and future viewers) figure out what to look at and how to solve their problem faster. Keep the external reference - the best answers cite more info in external sources! More info here: stackoverflow.com/help/how-to-answer – Pyx

Answer 3

You could use -webkit prefix for all safari browsers:

   position: -webkit-sticky;

table {
  border-collapse: collapse;
}
th,
td {
  padding: 1rem;
}
thead,
tfoot {
  background: #eee;
}
thead {
   position: -webkit-sticky;
  position: sticky;
  top: 0;
  border-bottom: 2px solid #ccc;
}

body {
  font: 110%/1.4 system-ui;
  margin: 0;
  padding: 10rem 2rem 50rem;
}

.sticky {
  background: red;
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  text-align: left;
}

.sticky--2 {
  background: indigo;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>

<table>
  <thead>
    <tr>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
      <th>Header Cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="sticky" colspan="5">Group Header 1 </th>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>

    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th class="sticky sticky--2" colspan="5">Group Header 2</th>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
    <tr>
      <th>Row Header</th>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
      <td>Cell Data</td>
    </tr>
  </tbody>
</table>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>

Enwind

it has the same issue: i.imgur.com/8NEgPYB.png – Poi