safariで表示が崩れたデザイナーのあなたへ

iphoneのsafariで表示が崩れてしまった。

こんな壁にぶち当たっいませんか？
私は先々週ぶち当たっていました。

原因は何でしょうか？

それは、positionタグでした。

私はテキストをpositionで位置指定していました。
そして、display:block;でなんとかなる様な甘い壁ではありませんでした。

また、iphoneで崩れている。
という事はipadでも崩れている。
という事です。
心が漆黒の闇に包まれる瞬間ですね。

iphone確認環境は以下の通りです。
●iphone6s
●ios 10.3.1
●ブラウザ　safari

CSSハックで回避を試みる

もうこれっきゃない。
そう思い、色々調べてsafariのみに対応するCSSを書くことにしました。

/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, .css_selector {
position: absolute;
top: 15px;
text-align: center;
}
}

結果は、完敗でした。

そんな私は、もうpositionタグを使うことをやめたのでした。
そう。何をどうあがいても崩れ続ける時は、いっそのことpositionタグの使用をやめたらいいと思います。

そしてpadding君に助けてもらいました。
フッ、最初からそうすればよかったぜ。
それで表示がうまくいくなら、オールオッケー！！

safari用　新型CSSハック

しかしその後も少しsafariの事が気になったので、調べてみると…
ありました。
別の書き方。

/*Safariだけに適用される新型CSSハック*/
_::-webkit-full-page-media, _:future, :root .css_selector {
position: absolute;
top: 15px;
text-align: center;
}

しかし、padding君に助けられた私は未だにこのCSSを試していません。

試してみたら、またこの記事を更新します！

safari表示崩れに関するその後・・・とブレークポイント追記

約8ヶ月ぶりです！皆さん、こんにちは。
今日は、2017年12月7日です！

今回は、このsafari表示崩れに関する続きを書こうと思うのですが、
じつは前回最後に書いた、新型CSSハックを試していません。
違うサイトの制作時に、冒頭で書いた方のCSSで回避できました。

今回の確認環境は以下の通りです。
(今回の崩れはiphoneではないです。PC環境です！すみません。)
●Windows10 Pro Ver.1703
●ブラウザ safari 5.1.7

症状：レスポンシブサイトにおいて、PC表示の時に特定ブロックの位置が数ピクセル上にずれる。
　　　今回は直上のブロックにpositionタグを使用していました。
　　　(これが原因かどうかは謎ですが、、、怪しいze)

そして、レスポンシブサイトなのでブレークポイント(最小幅751px)も追記しました。
(これ、前の時もレスポンシブサイトだったのですが、、、もしかして、これ書き忘れてたかな。。。とゾッとしてます。。。)

/*Safariだけに適用されるCSSハック*/
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width:751px) {
  ::i-block-chrome, 
    セレクタ { プロパティ: 値; }
}	

という事で、レスポンシブサイトの時はブレークポイントも書いてみてくださいね！
ではでは。

Written by Baycross Marketing