私のレイアウトは非常にシンプルで、繰り返しの背景要素、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;
}