我知道iPhone过去不支持位置:固定,但现在它支持了,当我将一个固定位置元素滚动到其他具有更高z索引的元素之后时,我看到了一个奇怪的问题。具有较低z索引的固定位置元素暂时出现在前面,这看起来非常糟糕。有办法防止这种情况吗?
我尝试添加了< code >-WebKit-transform:translate 3d(0,0,0);添加到固定元素,但这似乎无助于解决这个问题。
这里也有一个jsfiddle。
更新我在z索引之外添加了transform:translateZ(x)
,但它没有解决问题。
Update2我添加了< code>-webkit前缀,这确实修复了移动Safari上的z索引问题,但也导致了position:fixed在桌面Chrome中无法正常工作。
z-index 在 position:fixed 时不可靠,如以下小提琴所示: http://jsfiddle.net/mZMkE/2/ 改用平移 Z 变换。
transform:translateZ(1px);
在您的页面元素上。
编辑:在您的代码中,添加以下css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
然后从这些元素和 .intro 中删除 z 索引引用。
更新1:除了z-index
之外,我还添加了转换:translateZ(x)
,它没有解决问题。
更新2:我添加了< code>-webkit-前缀,这确实修复了移动Safari上的z索引问题,但也导致了< code>position:fixed在桌面Chrome中无法正常工作。"
然后尝试在移动特定的媒体查询中包装-webkit-TranslateZ(x)
。
例如:
@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
所以在这种情况下,它不会在桌面上做任何事情Chrome
当我需要在不同层的堆栈中设置不同的位置时,我尝试了在特定情况下接受的解决方案作为答案,但仅此一项在桌面浏览器(Firefox和chrome)和Safari都不起作用iOS
我想出了这个hack,它对每个div都使用translateZ和z-index,它在这些平台上工作。TranslateZ和z-index的顺序很重要。对于设置每个层的位置是
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative;
z-index: 1;
我对 z 索引使用相同的值并翻译 Z 只是为了保持一致性,这不是必需的。请参阅工作示例 http://jsbin.com/peyehufo/5