CSS 移动 safari 位置：滚动时固定的 z-index 故障
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20832531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mobile safari position:fixed z-index glitch when scrolling
提问by emersonthis
I know iPhones used to notsupport position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?
我知道 iPhone 过去不支持 position:fixed，但现在它支持，当我在具有更高 z-index 的其他元素后面滚动固定位置元素时，我看到了一个奇怪的故障。具有较低 z-index 的固定位置元素暂时出现在前面，看起来很糟糕。有没有办法防止这种情况？
I tried adding -webkit-transform: translate3d(0, 0, 0);to the fixed element and it doesn't seem to help this problem.
我尝试添加-webkit-transform: translate3d(0, 0, 0);到固定元素，它似乎没有帮助这个问题。
UpdateI added transform:translateZ(x)in addition to the z-index and it did not fix the problem.
transform:translateZ(x)除了 z-index 之外，
我还添加了更新，但它没有解决问题。
Update2I added -webkitprefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.
Update2我添加了-webkit前缀，这确实修复了移动 Safari 上的 z-index 问题，但也会导致 position:fixed 在桌面 Chrome 中无法正常工作。
回答by tnt-rox
z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/use translateZ transformation instead.
z-index 与 position:fixed 不可靠，如这个小提琴所示：http: //jsfiddle.net/mZMkE/2/使用 translateZ 转换。
transform:translateZ(1px);
on your page elements.
在您的页面元素上。
EDIT: In your code, Add this css:
编辑：在您的代码中，添加此 css：
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
然后从这些元素和 .intro 中删除 z-index 引用。
回答by Barna Tekse
Update 1:I added
transform:translateZ(x)in addition to thez-indexand it did not fix the problem.Update 2:I added
-webkit-prefix and this DOES fix the z-index problem on mobile Safari, but also causes theposition:fixedto work incorrectly in desktop Chrome. "
更新 1：我添加
transform:translateZ(x)了除了z-index并且它没有解决问题。更新 2：我添加了
-webkit-前缀，这确实解决了移动 Safari 上的 z-index 问题，但也会导致它position:fixed在桌面 Chrome 中无法正常工作。”
Then try to wrap -webkit-transform:translateZ(x)in a mobile specific media query.
For example:
然后尝试封装-webkit-transform:translateZ(x)特定于移动设备的媒体查询。
例如：
@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
So in this case it won't do anything on desktop Chrome
所以在这种情况下它不会在桌面 Chrome 上做任何事情
回答by cagnarrogna
I tried the solution accepted as an answer in a specific case when I needed to set different position in the stack of different layers, but that alone didn't work both in desktop browsers (firefox and chrome) and Safari iOS
当我需要在不同层的堆栈中设置不同的位置时，我尝试了在特定情况下作为答案接受的解决方案，但仅此一项在桌面浏览器（firefox 和 chrome）和 Safari iOS 中都不起作用
I came out with this hack which uses both translateZ and z-index for each div, which is working in those platforms. The order of translateZ and z-index is important. For setting each layers position is
我提出了这个 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;
I used the same value for the z-index and translateZ just for consistency, it is not necessary. See working example http://jsbin.com/peyehufo/5
我对 z-index 和 translateZ 使用了相同的值只是为了一致性，这不是必需的。参见工作示例http://jsbin.com/peyehufo/5
回答by emersonthis
I'm not advocating for this solution, but it's the best I've got at the moment...
我不提倡这个解决方案，但这是我目前最好的......
In order to replicate the effect of z-index with position fixed on an iPhone, it seems to require two techniques together:
为了在 iPhone 上复制 z-index 固定位置的效果，似乎需要两种技术：
As suggested by @tnt above, use
transform:translateZ(n)where z-index is used to get mobile safari to handle the stack order correctly. This appears to have the unfortunate side-effect of causing the position:fixed to stop working...Instead of position:fixed, use a javascript technique like thisto fake it.
正如上面@tnt 所建议的，使用
transform:translateZ(n)where z-index 用于让移动 safari 正确处理堆栈顺序。这似乎具有导致 position:fixed 停止工作的不幸副作用......而不是位置：固定，使用像这样的javascript技术来伪造它。
I haven't tested this thoroughly (because I'm not going to do it), but it seems to work fairly well. Although the "fixed" element seems to stutter a bit.
我还没有彻底测试过（因为我不打算这样做），但它似乎工作得很好。虽然“固定”元素似乎有点卡顿。
