android - Android ブラウザー (Chrome ではなく、すべてのバージョンではありません) には、z-index、絶対位置に関する奇妙な問題があります

Question

Android ブラウザと、モーダル ダイアログで一般的に使用される絶対位置の「シュラウド」要素をどのように処理するかについてログに記録されているのを見たバグがいくつかあります。これはjsbinの例です。. 通常のブラウザで「表示」ボタンをクリックすると、「OK」ボタンのある小さなボックスが表示されます。HTML:

  <div id=content>
    <button type=button>Show</button>
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
    <p>
    This is the contents of the page.
</div>

<div id=shroud>
</div>
<div id=frame>
    This is a frame.
    <button type=button>Ok</button>
</div>

JavaScript は「フレーム」を非表示にして表示するだけ<div>です。

$(function() {
  $('body')
    .on('click', '#content button', function(ev) {
      ev.preventDefault();
      $('#frame, #shroud').show();
    })
      .on('click', '#frame button', function(ev) {
        ev.preventDefault();
        $('#frame, #shroud').hide();
      });
});

そして、CSS は単純な配置にすぎません。メイン コンテンツ、シュラウド、およびフレームにはすべて、それらを明示的にスタックするための「z-index」値があります。

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

button {
  font-size: 18px;
  font-weight: bold;
  color: rgb(20,24,42);
  background-color: yellow;
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#frame {
  background-color: #e2f0fa;
  height: 100%;
  z-index: 0;
}

#shroud {
  display: none;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 10;
  background-color: rgba(0,0,0,0.4);
}

#frame {
  display: none;
  position: absolute;
  top: 50px; left: 20px;
  width: 200px; height: 200px;
  border: 2px solid #336699;
  border-radius: 10px;
  background-color: #f0f2f9;
  padding: 20px;
  z-index: 20;
}

したがって、Android 4.0.3 および 4.1 で気付いた問題は、小さな「フレーム」ボックスがまったく表示されないことです。シャウド<div>はそうであり、指でページを「小刻みに動かす」ことができ、フレームボックスが部分的に表示されることもあれば、(私が思うに)常にシュラウドの下に表示されることもあります。

Chrome でサポートされている新しいデバイスで Android ブラウザを使用する理由はわかりませんが、誰かが推測するかもしれません。他の誰かがこれを見たことがありますか？同様のバグ レポートも見つかりませんでした。古いバージョンで入力要素がオーバーレイ要素を「にじみ出る」という間抜けな問題を抱えていることを見てきましたが、このようなものはありません。

古い 2.2 と 2.3 の携帯電話でそのテスト ページを試してみましたが、問題なく動作しました。私の HTC One X と Nexus 7 はどちらも失敗します。