質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

ios safari モーダルを立ち上げているのに下のレイヤーをスクロールしてしまう。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,845

score 30

質問です。

【今回期待する動作】
モーダルを立ち上げたとき、背景を固定しつつ、慣性スクロールすること

【現状】
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のバグで頭を抱えています。
ナレッジのある方がいらっしゃいましたら、ご教授よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kyoya0819

    2019/11/12 20:42

    iOS12の詳細バージョンをお願いします。

    キャンセル

  • kyoya0819

    2019/11/12 20:42

    あとSafariのバージョンも

    キャンセル

  • hosodaaaaa

    2019/11/12 21:38

    実機で検証したバージョンです。
    --------------------------------
    ios : 12.4.1
    safari : 604.1
    --------------------------------
    ios : 10.3.4
    safari : 602.1
    --------------------------------

    キャンセル

  • hosodaaaaa

    2019/11/12 21:44

    正常に動作するios13の各バージョンを記載するのを忘れてしまいましたので、以下が確認ください。
    --------------------------------
    ios : 13.2.0
    safari : 604.1
    --------------------------------

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る