26

我的布局相当简单，一个重复的背景元素，几个垂直空间（道路）和一些水平的桥梁和一辆小汽车，当你滚动时应该在它们下面行驶。

在我的 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 （在 iPad 上全屏查看以避免与演示内容无关的 iframe 滚动问题）

有谁知道代码有什么问题会导致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在桥上添加一个。这允许正 z-index 数字（汽车在 10，坑洼在 1，桥在 20）：

新的 CSS：

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

将翻译添加到不同的桥似乎不仅可以修复之前的闪烁，还可以让您立即滚动而不会有任何延迟。

在全屏或完整的 Plunker中查看。在 iPad iOS 6.0.1 上测试。

于 2013-08-14T18:58:50.020 回答