Положение абсолютного столбца в таблице выровнено неправильно (Safari iOS)

Question

Проблема

У меня есть таблица с первыми 2 столбцами position: absolute, так что они "фиксированы", а столбцы справа прокручиваются. Это прекрасно работает на Chrome, Firefox, Safari на Ма c и др. c. но на Safari на iOS это не так. Столбцы position: absolute не выровнены, и границы этих столбцов появляются ниже границы столбцов с не совсем позиционированием справа.

Пример

Вот пример для просмотра на iOS.

Код

html

<div class="outer">
    <div class="scroller">
      <table>
        <thead>
          <th class="th1">Rank</th>
          <th class="th1">User</th>
          <th class="th2">Week 1</th>
          <th class="th2">Week 2</th>
          <th class="th2">Week 3</th>
          <th class="th2">Week 4</th>
          <th class="th2">Week 5</th>
          <th class="th2">Week 6</th>
          <th class="th2">Week 7</th>
        </thead>
        <tbody>
          <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
            <td>col 5</td>
            <td>col 6</td>
            <td>col 7</td>
            <td>col 8</td>
            <td>col 9</td>
          </tr>
          <!-- numerous more rows like the one above ... -->
        </tbody>
      </table>
    </div>
</div>

css

.outer {
  position: relative;
  margin: 15px;
}

.scroller {
  display: block;
  width: calc(100% - 174px);
  overflow-x: auto;
  -webkit-overflow-scrolling: unset;
  margin-left: 173px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.89rem;
}

/* make the first column fixed */
tr > th:first-of-type,
tr > td:first-of-type {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  left: 0;
  position: absolute;
  top: auto;
  width: 54px;
  text-align: center;
}

/* make the second column fixed */
tr > th:nth-of-type(2),
tr > td:nth-of-type(2) {
  left: 54px;
  position: absolute;
  top: auto;
  width: 120px;
}

tr > th:last-of-type,
tr > td:last-of-type {
  border-right: 1px solid #000;
}

tr:last-of-type td {
  border-bottom: 1px solid #000;
}

th,
td {
  border-top: 1px solid #000;
  padding: 0.45rem;
  vertical-align: top;
  white-space: nowrap;
  color: #212529;
  background-color: #fff;
}

th {
  border-bottom: 2px solid #000;
}

td {
  overflow-x: hidden;
  text-overflow: ellipsis;
}

Попытки исправить

Я попытался сделать первые 2 <th> (которые являются абсолютными позициями) вместо top: 0 top: auto, что немного помогло этим двум, но остальные абсолютно позиционированные ячейки все еще были неправильно расположены.