tips blog

position:fixed;で下側に固定したとき、親要素にposition:fixedの設定がされているとiphone safariでスクロール時にズレた動きになる

2019年10月29日

■ 現象 ———————————-
・iphone safariでposition:fixed設定の要素がスクロール中ズレる

■ 原因 ———————————-
恐らくiphone safariのバグだが、
position:fixed;で下側固定(bottom:XXpx;)したとき
親要素タグにposition:fixedの設定がされているとiphone safariでスクロール時にズレた動きになる。
タイミングは、iphone safariの上下にメニューバーが出てきたとき(広がったとき?)に、
スクロールすると後追いになるような動きになる。

□ サンプル
以下の場合、#hd #gnav .gnav-hamburger要素がズレる動きをする。

[html]

[css]

#hd {
position:fixed;
}
#hd #gnav {
}
#hd #gnav .gnav-hamburger {
position:fixed;
bottom:0;
left:0;
width:60px;
height:60px;
background:#ff0000;
}

■ 解決 ———————————-
・親要素にposition:fixedに設定しないように組む。

□ サンプル

[html]

[css]

#hd {
position:fixed;
}
#gnav {
}
#gnav .gnav-hamburger {
position:fixed;
bottom:0;
left:0;
width:60px;
height:60px;
background:#ff0000;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です