26

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

私の Mac ではすべて正常に動作しますが、iOS デバイス (私のテスト デバイスは iOS 6.1 の iPhone 4、iOS 6.1.3 の iPad 2) ではz-index、スクロール イベントがアクティブなときは受け入れられません。

これは、スクロールすると、 に向かう車が、本来position: fixedあるべき橋を高くするのではなく、橋 ( 「車」よりもwindow高い) の上を移動していることを意味し、iOS 以外のブラウザーでは、車を橋の下に走らせます。z-indexz-index

単純な階層化の問題のように見えますが、非常に単純化されたテスト ケースでもバグは明らかです。

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

z-indexスクロールがアクティブなときに動作しない原因となるコードの何が問題なのか、誰かが知っていますか?

注:これは、Chrome for iOS とネイティブの Mobile Safari の両方で発生します。

誰かがデモを開かずに修正を指摘できる場合に備えて、上記にリンクした削減されたテスト ケースで実行されているコード ビットを次に示します。

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;
}
4

1 に答える 1

56

私は多くの試行錯誤の末にこれを解決したと信じています。私がしたことはwebkit transform、ブリッジに a を追加することでした。これにより、正の z インデックス番号が可能になります (車は 10、くぼみは 1、橋は 20)。

新しいCSS:

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

さまざまなブリッジに変換を追加すると、以前のちらつきが修正されるだけでなく、遅延なくすぐにスクロールできるようになります。

全画面または完全な Plunkerで確認してください。iPad iOS 6.0.1 でテスト済み。

于 2013-08-14T18:58:50.020 に答える