web関連

safariだけ表示が崩れる件について

2018/07/18

/ /

safariだけ表示が崩れる件について

PCサイトにハンバーガーメニュー置いて、開いたら背景を固定してメニューを表示させる機能実装したサイトであったこと。
お客さんからsafariで「ハンバーガーメニューを押すとメニューが開かず表示が崩れる」と連絡があり、実際に調査したらそこそこ苦戦をしたので備忘録

safariのpositionはやっかい

結果的にハンバーガーメニュー開いた時にbodyにposition:fixed;が付くんだけど、そのpositionがあかんかったらしい
なので、safariの時は背景を固定させないようにコードを書いた。

	/* Safari用CSSハック */
_::-webkit-full-page-media, _:future, :root body.lock {
position: inherit;
}

結局原因がわからずsafari用のcssハックでsafariの時はfixedで固定されないようにして対応
おかげでsafariの時に背景が動いちゃうわー

※他のブラウザでは、背景が固定されました。

今回の案件有料テンプレート使っててどこが原因かどうか判断するの時間かかりそうだったから妥協しました。
 

普段、仕事ではsafari使わないから忘れていたけどwindowsに入っている古いsafariでも「歯車」クリック→「設定」→「詳細」メニューバーに"開発"メニューを表示をチェック→「メニューバー」からキャッシュ無効にできたり「要素の詳細を表示」できたりするんすね
古いからかキャッシュの削除はなかったけど…まぁ、最終バージョンの5.1.7だし…