質問です。
【今回期待する動作】
モーダルを立ち上げたとき、背景を固定しつつ、慣性スクロールすること
【現状】
ios safariでモーダルを立ち上げ、スクロールしたときに、一番下までスクロールしてから
一部余白をスクロールすると、下のレイヤーにフォーカスしてスクロールしてしまいます。また、overflow:hidden; や position:fixed; をかけて背景固定をしているのですが、position: fixed; をかけていることにより、一部余白をスクロールすると、下のレイヤーにフォーカスしてスクロールしてしまいます。
が固定されてモーダルがスクロールできなくなってしまいます。 しかし、一部余白をスクロールすると期待している動作に戻ります。
ちなみに、このバグはios12 safari以前で起きるバグです。
ios13 safariでは期待する動作をします。
[html] <body> <div class="box"> <header></header> //z-index: 10; <div class="main"></div> //z-index: 1; <div class="item-modal modal touch" style="display: none"></div> //z-index: 0; <div class="item-modal modal touch" style="display: none"></div> //z-index: 0; </div> </body>
[css] //ここからclick eventが発火する前のstyle .body{ height: 100%; width: 100%; } .box{ height: 100%; } .header{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; height: 58px; padding: 10px 0; z-index: 10; position: fixed; width: 100%; top: 0; left: 0; background-color: #EEEEEF; -webkit-transition: -webkit-transform 300ms; -moz-transition: -moz-transform 300ms; -o-transition: -o-transform 300ms; transition: transform 300ms; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } .main{ box-sizing: border-box; position: relative; background-repeat: repeat-x; width: 100%; z-index: 1; transition: transform 300ms; background-color: #888; min-height: auto; } .item-modal{ -webkit-box-align: start; align-items: flex-start; } .modal{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; -webkit-box-pack: center; justify-content: center; } .touch{ overflow-y: auto; background-color: #f7f7f7; } //------------------------------------------------------------------------ //ここからclick eventが発火した後、変更のあるstyle .body{ height: 100%; width: 100%; overflow: hidden; position: fixed; } //click event発火後、divタグに直書きしたstyleが変わる スタイル属性{ display: flex; } //click event発火後、is-activeクラスが追加される .modal.is-active{ z-index: 19999 } .touch{ overflow-y: auto; background-color: #f7f7f7; -webkit-overflow-scrolling: touch; }
初めて見てsafariのバグで頭を抱えています。
ナレッジのある方がいらっしゃいましたら、ご教授よろしくお願いいたします。
あなたの回答
tips
プレビュー