SafariでCSSが反映されなかった話

経緯

先日、サイトを作っていた際にクライアント様からある指摘を受けました。
どんな指摘かと言いますと、

「iPhoneで見ると文字がズレてるんですけど、、、」

先輩からは
1パーツ作るごとに検証ツールでレスポンシブして、挙動をきちんと確認してね。
と言われていたので、サイト制作ではそれを心がけていました。
もちろんやっていたつもりだとか
確認不足だとかそういうことがあったのかもしれません。
急いで確認してみました。

すると、Chromeで見たかぎり特にそのような挙動は見られず、、

どういうことだ？と思い、
クライアント様から指摘のあったiPhoneで確認してみました。
たしかに文字がズレていました！

解決方法

さっきChromeで見たときは何もなかったのになぜだ？
さらに調べると、ブラウザによってCSSのスタイルが崩れることがある！
ということが判明しました。
そこでSafariの検証ツールで見ると、
書いていたCSS自体はきちんと反映されていました。

調べると、SafariはChromeよりもCSSにて詳細な指示が必要だということもわかりました。
文字を重ねるために、Chromeではpositionを設定せずとも対応してくれたのですが
Safariではそれが必要だったのです。
そこで今回の解決策としてSafariにだけCSSを適用されるようにしました。

書き方

::-webkit-full-page-media, :future, :root クラス名or要素名..{
/* safariにのみ適用したいCSSプロパティを入れる */
  left: 0;
}

::-webkit-full-page-media, :future, :root クラス名or要素名..を使うことで
SafariにだけCSSが適用されます。
これをCSSに追加してみると

綺麗に文字の上に重なりました。

まとめ

今回の指摘をいただいたことでCSSハックというものがあることを知れました。
基本的にChromeを使って制作していて、他のブラウザでの確認は盲点でした。
とても良い経験になりました。
これから制作していくときは他のブラウザでの挙動もしっかり意識していこうと思います。

＊こちらの記事は自分自身のトラブルへの対応の流れをまとめたものです。
もし間違いや、さらに意識すべきことがありましたらぜひご教授いただけたらと思います。