Bootstrap3のモーダルが影の下に隠れてしまう

iphone用のwebサイトをAngular1.3とBootstrap3で作っています。
Bootstrapのmodal()を使ってモーダルを開いていますが、モーダルの影の下にコンテンツが表示されてしまいます。

<body>の直下に<div class="modal">を配置すると最前面に表示されるのですが、その下の階層に配置すると上記の現象が発生します。

現象はiOSのSafariで表示した時に発生します。
iOS10,11ともに同じ状態です。

PCのブラウザ(MacのSafari,Chrome、WindowsのIE/Chrome/Firefox）で見ると問題なく、モーダルが最前面に表示されます。

.modal-dialog のz-indexに3000を設定してもうまくいきませんでした。
どなたかお詳しい方ご教示いただけると助かります。

<body>
  <div>
    <div class="modal fade">
      <div class="modal-dialog" style="position:relative;z-index:3000;">
        <div class="modal-content">
        ...
        </div>
      </div>
    </div>
  </div>
</body>

x_x

2017/10/27 04:32

本当にこのようなソースですか？入れ子がおかしいようですが

jlhgw

2017/10/27 05:05

失礼しました。最後が</body>でした。

行動規範の内容に同意します

回答1件

自己解決

解決しました。
modalの親要素である<div>に、-webkit-overflow-scrolling: touchを指定しているのですが、その指定を外したら表示できるようになりました。

スクロールはぎこちなくなってしまいましたが、とりあえず解決しました。
ありがとうございました。

投稿2017/10/27 07:14

jlhgw

総合スコア11

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

Bootstrap3のモーダルが影の下に隠れてしまう

関連した質問