Jan*_*nis 22 css scroll z-index css-position ios
我的布局相当简单,一个重复的背景元素,一些垂直空间(道路)和一些水平桥梁和一个小车,当你滚动时应该在它们下面开车.
在我的Mac上一切正常,但在iOS设备上 - 我的测试设备是:iOS 6.1上的iPhone 4,iOS 6.1.3上的iPad 2- z-index当滚动事件处于活动状态时,它不受尊重.
这意味着,当你滚动,车子,这是position: fixed对window,是在桥上移动(具有较高的z-index比"汽车"),而不是z-index使桥式更高,因为它应该是在非iOS的浏览器,其让车开到桥下.
这似乎是一个简单的分层问题,但即使有一个非常简化的测试用例,这个bug仍然很明显.
测试用例: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;
}
Los*_*ack 45
我相信经过多次试验和错误后我已经解决了这个问题.我所做的是webkit transform为桥梁添加一个.这允许正z-index数字(汽车在10,坑洞在1,桥在20):
新CSS:
.bridge {
-webkit-transform: translate3d(0,0,0);
}
将转换添加到不同的桥接器似乎不仅可以修复之前的闪烁,还可以让您立即滚动而不会有任何延迟.
检查它在全屏或全Plunker.在iPad iOS 6.0.1上测试.