Safariでcssが効かない時に解決に結びつく考え方 WEB開発のお悩み解決！

みなさんは普段どんなブラウザでネットサーフィンしていますか？

昨今は
パソコンではChrome
スマホではSafari
なんて方が多いようです。
参考：Shift Asia

私もパソコンではChromeを使って、スマホはiPhoneなのでSafariを使っています。

WEB開発でも同じで、Chromeを使って、いざSafariで画面確認を行うと…。

「ズレてる！」
「伸びてる！」
「cssが効いてない！？」

悲しいかな今だに起こしちゃいます。
そんな中で、ベンダープレフィックスやcssハックを使っても上手くいかない事もありますよね。
今回はそんな時にまず試してみると解決できる可能性が高い考え方をご紹介します。

結論から言うと
Chromeちゃんは自動で調整してくれることが多い。
Safariちゃんは完璧な画面を作るために詳細な指示を欲しがる。
ということを理解しておけばOKです。

Safariで画像が伸びた

画像にwidth:;とheight:;を指定すると正しく表示されることが多いです。

.hoge{
    width:200px;
    height:auto;
}

また同様の現象は、flex系のプロパティを使って<img>を含んだ要素を並べている時にもよく起こります。親要素にalign-items: flex-start;を記述することで正しく表示されることが多いです。

それでも上手くいかない時、flexとSafariに関しては先人達のわかりやすい記事がたくさん出てくるので調べてみればすぐ解決できるはずです！

.hoge{
  align-items: flex-start;
}

Safariでグラデーション（linear-gradient）が上手くいかない

「そもそもグラデーションが効かない」（表示されない）
「画面いっぱいにグラデーションが広がらない」（想定と違う挙動）
「なんだか短い？」

これ結構あります、そんな時も落ち着いて…。

もしかしたら、以下に近い形で記述していませんか？

.hoge{
    background: linear-gradient(red, blue);
}

このパターンは、もっと明確・詳細に記述することで解決することが多いです。
詳細に書いた変更例が以下。

.hoge{
    background: linear-gradient(to top, red 0%, blue 100%)repeat-x;
}

実はこの変更前と変更例、省略していないだけで、書いてあることはまったく同じです。

グラデーションプロパティは以下のサイトをご確認ください。
参考：mdn web docs

SafariはCSSの詳細な記述を求める

先ほど紹介したbackground: linear-gradient();以外にも、実は記述を省略しているプロパティ:値;ってたくさんありますよね。

Safariでどうにかこうにかしても上手くいかないcss。
「autoがデフォルトの値だから指定しなくてもいいよね♪」
なんて無意識のうちにプロパティや値を省略しているのが原因になっているかもしれませんよ。

Safariでcssのanimationを使ったJSの挙動がおかしい時はこちらの記事をご覧ください

【Safari】css/JSの挙動がおかしい時の対処法【JavaScript】