web-dev-qa-db-ja.com

iOSデバイスでスクロールしているときに、要素のZ-indexが機能しない

私のレイアウトはかなりシンプルで、繰り返しの背景要素、いくつかの垂直方向のスペース（道路）、いくつかの水平方向の橋と、スクロールするとその下を走行する小さな車です。

すべてが私のMacで正常に動作しますが、iOSデバイスでは—テストデバイスは次のとおりです：iOS 6.1上のiPhone 4、iOS 6.1.3上のiPad 2—スクロールイベントがアクティブなとき、z-indexは適用されません。

これは、スクロールすると、position: fixedからwindowまでの車が（車よりもz-indexが高い）橋の上を移動するのではなく、 z-index橋を本来より高くし、iOS以外のブラウザーで橋を下にして車を運転させます。

単純なレイヤリングの問題のように見えますが、非常に単純化されたテストケースでも、バグは依然として明らかです。

テストケース： http://plnkr.co/EAE5AdJqJiuXgSsrfTWH（フルスクリーンで表示デモコンテンツに関係のないiframeスクロールの問題を回避するためのiPad）

スクロールがアクティブなときにz-indexが機能しない原因となるコードの問題を誰かが知っていますか？

注：これは、Chrome iOSおよびネイティブモバイルサファリの両方）で発生します。

デモを開かずに誰かが修正を指摘できるように、上にリンクした 縮小テストケース で実行されているコードビットを以下に示します。

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="car"></div>

    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
  </body>

</html>

CSS：

body {
  /* Adds the 'road' as a background image. */
  background: #8BA341 url("http://f.cl.ly/items/1r2g152h2J2g3m1e1V08/road.png") repeat-y top center;
  margin:     0;
  padding:    0;
} 

.car {
  /* The car's position is fixed so that it scrolls along with you. */
  position:   fixed;
  top:        5%;
  left:       52%;
  width:      220px;
  height:     330px;
  background: #BD6C31;
  z-index:    1;
}
.street {
  /* Empty in the example, just used to space things out a bit. */
  position:   relative;
  height:     500px;
}
.bridge {
  /* A bridge crossing the main road. The car should drive under it. */
  position:   relative;
  height:     353px;
  /* Image of repeating road. */
  background: url("http://f.cl.ly/items/0u0p2k3z45242n1w3A0A/bridge-road.png") repeat-x center left;
  /* Higher z-index than car. */
  z-index:    2;
}
ioscssscrollz-indexcss-position
22
Jannis

私は多くの試行錯誤の後でこれを解決したと信じています。私がしたことはwebkit transform橋へ。これにより、正のz-index値が可能になります（車10、ポットホール1、橋20）。

新しいCSS：

.bridge {
  -webkit-transform: translate3d(0,0,0);
}

別のブリッジに翻訳を追加すると、以前のちらつきが修正されるだけでなく、遅延なく即座にスクロールできます。

full screen または full Plunker で確認してください。 iPad iOS 6.0.1でテスト済み。

47
Lost Left Stack