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]
#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;
}
RELATED
-
2023年12月13日
-
2023年8月24日
-
2023年8月1日
-
2021年8月25日
コメントを残す