iOS環境でpositionはズレるらしい（CSS）

最近ずっとiOS周りでぐだぐだしてるので😡って感じ。
自分用メモ書き。

状況

PCブラウザ（windows10、Chrome）とAndroidでの表示はこう

なんだけど

ipad（iOS16 ブラウザはChrome）（手元にiphoneが無いので）とかiOSだと

ってなっちゃう。safariでもこう。
(下の内容ちょっと違うのはスクショミスです)

記述内容

test.html

<table>
    <tbody>
        <tr>
            <th>題1</th>
            <td>いろいろ</td>
        </tr>
        <tr>
            <th>題2</th>
            <td>いろいろ</td>
        </tr>
        <tr>
            <th>題3</th>
            <td>いろいろ<br>とてもいろいろ</td>
        </tr>
        <tr>
            <th>二行に<br>なる場合</th>
            <td>
                <p>◯</p>
                <p>□</p>
                <p>△</p>
            </td>
        </tr>                
    </tbody>
</table>

test.scss

table {
  width: 100%;
  th {
    background-color: #ffe5e5;
  }
  td {
    display: block; //多分原因
  }
  th,
  td {
    padding: 0.6rem 0.8rem;
  }
  // 問題のとこ
  tr::before {
    position: absolute;
    width: calc(100% - 3.6rem);
    border: 1px solid #c200c2cc;
    content: "";
  }
  tbody::after {
    position: absolute;
    width: calc(100% - 3.6rem);
    border: 1px solid #003dc2cc;
    content: "";
  }
}

記述の意図

見ての通りテーブルがあって上下にborderを引いている。（もっと良い書き方があると思うけどひとまず置いておいて）
疑似要素で線を引いてるのは線の長さを調整するためです。
trの線とtbodyで分けているのも長さの調整とtrのみだと最後のtrに線がつかないから…です。

今回の原因がtdにdisplay:blockなどのdisplay要素を指定しているからっぽくて
flex指定してもbeforeで指定した線がズレました。不思議ですね。

といっても結構前からiosでposition要素はズレるらしいので（知らなかった）既出の現象らしいです。
まじで知らなかった。

position:fixed;で下側に固定したとき、親要素にposition:fixedの設定がされているとiphone safariでスクロール時にズレた動きになる

でも今回はsafariに限らずchromeでも起こったのでios自体の問題なのかな…とちょっと不思議。

解決

自分ではまだ見つけてない。
td { display:block; }をつけなければ良いんだけどそれは根本的な解決にはなってない気がする。

あともう疑似要素つけないでそのままth,tdにborder付けるしかないなって感じです。

safariだけだったら_::-webkit-full-page-media, _:future, :root をやってあげればいいと思うけど。
難しいね