ChromeとSafariで見え方が崩れる場合の対処法

はじめに

初めまして！Takumiです。
Qiita初投稿です。

LPを制作した際に、制作途中でつまづいたポイントを何記事かに分けて書いていきます。

同じような悩みを持っている方のヒントになれば嬉しいです！

それではご覧ください。

Safariで崩れる問題

コーディングをしていて、ローカル環境ではきれいになっていたのにいざ本番環境(実機)で検証してみると、画像や文章が崩れていると言うことはありませんか？

私はポートフォリオを作っているときに、この壁にぶつかりました。

コーディングし終えて、本番環境にも上げて、Chromeで確認して「よし完成！」と思ったとき、Safariでも確認をすると...

画像が指定したCSS(widthとか)が効いていなくて、画面いっぱいに広がっていました

「Chromeではきれいに見えているのに、Safariでは崩れている問題」

結論を最初に言っておくと、下記コードを入力することでSafariでもきれいに見えました。

_::-webkit-full-page-media,_:future,:root .CSSクラス名{
内容
}

画像の崩れも文章のフォントの乱れも、このコードを入力することで修正できました

ワンポイント

上記のコードを記入すればいいだけなのですが、私はSassを使ってCSSを書いていたのでどのように打ち込めばいいのか少し悩みました。

①Sassの中にそのまま入れてみた

A{
 &_::-webkit-full-page-media,_:future,:root .CSSクラス名{
 内容
 }
}

結果:効かない

②&の位置を変えてみた

A{
 _::-webkit-full-page-media,_:future,:root &CSSクラス名{
 内容
 }
}
※CSSクラス名の前に置いてみた

結果:これも効かない

③Sassの入れ子の外に出してみた

A{
&~{
}
}
::-webkit-full-page-media,:future,:root .CSSクラス名{
内容
}

結果:効いた

他に方法はあったかもしれませんが、今回はこの方法でいきました。

終わりに

以上です！
ブラウザごとに見え方が違うと焦りますが、対処法は用意されているので学んでいきましょう！この記事もプログラミングを勉強している人の手助けになれば嬉しいです！