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

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

原因は何でしょうか?

それは、positionタグでした。

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

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

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

CSSハックで回避を試みる

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


結果は、完敗でした。

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

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

safari用 新型CSSハック

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

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

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

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

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

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

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

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

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


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

Written by