Safariだけ描画位置がズレる問題

先日Chromeと比べてSafariだけ描画位置がズレる事象に出くわし、沼ったので共有します。

ブラウザ差分が要因だと疑ったせいで沼っていたのですが、不要なCSSを効かせていたことが要因でした

一度Safariの仕様に苦しんだ人は同じようにSafariを疑うかもしれませんが、CSSを見直すのも手です。

事象

• Chromeでは正しい位置に描画されている要素が、Safariではズレて描画されていた
  • 画像要素の上にオーバーレイで表示していた要素
  • Safariでだけ、なぜか小さい+左にズレて描画されていた

原因

• 無駄に設定してしまっていたwidth=100%
  • オーバーレイの下地になる要素に上記を指定してしまっていた
  • Chromeだと察して無視してくれていたようだが、Safariでは効いていた
    • heightはpxで指定して、widthは100%にしていた状態
    • Chromeでは画像比率を変えないように描画してくれていた？(ここは調べられていない)
    • Safariでは画像比率を変えて描画していた
  • 下地要素が大きかったため、目視だとwidthの差分がかなり見えにくく、盲目的にSafariとの違いを探していたが、実はChromeでは効いていないwidthが要因だった