CSS | ios で position:absolute top: 50% がずれる

Question

課題

スマホ専用の静的サイトを作成中、ios だけ position:absolute と top: 50% の位置がずれる

ios は position の仕様が異なるのだと思うのですが、デバックできず困っております
詳しい方、どうかご教示いただきますと幸いです

課題の環境

・iphone, ipad で観測、windows, android では観測されず
・ios においてブラウザは、safari, chrome ともに同じ表示
・CSSは、SCSSをコンパイルしてHTMLで直接読み込み
・ホストは、AWS S3（とCloudFront）

URL

https://kango.bookstone.jp/lp/003/

ソースコード

                <td class="table__link-cell">
                  <a href="#card" class="table__link"></a>
                </td><!-- /.tabel__link -->

.table__link-cell {
  width: 8%;
  // TODO: 意味ない
  // position: relative;
}

.table__link {
  position: relative;
  top: 0;
  left: 0;
}

.table__link::before {
  content: '\f105';
  position: absolute;
  top: 50%;
  left: 5px;
  font: 900 1.25rem $font_icon;
  color: $color_grey;
  transform: translateY(-50%) scaleY(2.5);
}

課題に対して取り組んだこと

google, teratail で 「ios position 効かない」「ios position not working」などで検索

Comments

[itagagaki]

再現ができませんので、良ければ質問を編集してコード全体を書いてください。

[Shintaro98]

ありがとうございます。

・どの先祖要素まであればご覧になりやすいでしょうか？table かそのラッパーのdivくらいまでですか？
・CSSは上記以外にリセット系の css-wipe を利用してます

また状況の再現ということであれば、URLから閲覧いただいたほうが齟齬がないかもしれません。

[itagagaki]

ああ、どのみち実機でしか再現できないんですね…

[Shintaro98]

こういった結論にはならないのではと思うのですが、、
> ああ、どのみち実機でしか再現できないんですね…

ご情報が不足していたようで、ご迷惑おかけいたしました。ご応答ありがとうございました。

[itagagaki]

お役に立てずすみません。

Answer 1

親要素に下記を追加すると適切な表示になりました

.table__link {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

位置がずれていない実装をいくつか探してトライエラーで解決したため、課題の原因は未調査です。