3 column 3 row HTML table breaks in Mobile Safari but works fine in Chrome and Firefox

Question

Chrome & Firefox

Mobile Safari on IOS 14

Z-index seems to be ignored and it appears as though the pseudo elements aren't anchored correctly to the tbody element and stretch well beyond their parent.

What can be adjusted so Mobile Safari behaves similarly to Chrome and Firefox? I'm using pseudo elements to mimic the appearance of overlapping table rows. If this look can be achieved without the use of those pseudo elements that's also a solution that works for me.

th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
}
tbody td {
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tbody::before, tbody::after {
  position: absolute;
  z-index: -10;
  top: 0; right: 0; bottom: 50%; left: 0;
  background-color: #222;
  content: "";
}
tbody::after {
  top: 50%; right: 0; bottom: 0; left: 0;
  background-color: #444;
}
tfoot td { background-color: #444; }

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
  thead th {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>

Answer 1

It appears to be an issue with how the tbody element is rendered in Safari.

Getting rid of the pseudo elements completely and instead using a linear-gradient with hard stops on the table element itself behind the table cells seems to provide the same result as the desktop browsers without any issues in Mobile Safari.

th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
}
tbody td {
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tfoot td { background-color: #444; }
table {
  background-image: 
    linear-gradient( 
      transparent 30%, #222 30% 50%, #444 50% 70%, transparent 70% 100%
    );
}

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
   thead th {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>