アフィリエイト広告を利用しています

グローバルメニューにposition:stickyを使ったら、safariでレイアウト崩れが起きた(macOS & iOS共に)

グローバルメニューの要素に、position:sticky を設定しイイ感じに実装できたーっ\(^^)/となっていたが、safariで閲覧すると、見事にレイアウト崩れが発生。

ガッカリ(Chromeで開発しているので全然気づかなかったんですよね)

position:sticky を使わずに position: relative; を使ってレイアウトを設定することで解決した。

症状が、この「position:fixed;で下側に固定したとき、親要素にposition:fixedの設定がされているとiphone safariでスクロール時にズレた動きになる」と同じ感じで、スクロールすると後追いで、動かないはずのグローバルメニューが動いてレイアウトが崩れている。

さらに調べると、「safariで表示崩れ対処法」に書いてあるのと同じで

原因は、「header 要素に、position:sticky、子要素に position:fixed を設定」だった。

header 要素に、position:sticky を設定し、子要素のグローバルメニューの要素に position:fixed を書いていて、、ビンゴだった。

もう一つ参考記事はこちらの「iOS環境でpositionはズレるらしい(CSS)

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告