私のレイアウトはかなりシンプルで、繰り返される背景要素、いくつかの垂直スペース (道路)、いくつかの水平な橋、そしてスクロールするとその下を走る小さな車です。
私の 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スクロールがアクティブなときに動作しなくなる原因となるコードのどこが間違っているのか知っている人はいますか?
注記：これは、iOS 版 Chrome とネイティブの 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>
CS: ...
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;
}