移动safari定位:在滚动时固定z-index故障。

I know iPhones used to not support 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过去不支持位置:固定，但现在它确实如此，当我滚动一个固定的位置元素时，我看到了一个奇怪的故障。低z指数的固定位置元素出现在前面，看起来很糟糕。有没有办法避免这种情况?

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);对于固定的元素，它似乎没有帮助这个问题。

Here is a jsfiddle as well.

这是一个jsfiddle。

Update I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.

更新我添加了transform:translateZ(x)除了z索引，它没有解决问题。

Update2 I added -webkit prefix 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-索引问题，但也导致了这个位置:固定在桌面浏览器中工作不正确。

4 个解决方案

#1

z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.

z索引不可靠的位置:固定的，如图所示: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 refs。

#2

" Update: I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.

更新:我添加了transform:translateZ(x)除了z索引，它没有解决问题。

Update2: I added -webkit- prefix 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-索引问题，但也导致了这个位置:固定在桌面浏览器中工作不正确。”

Than 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

在这种情况下，它不会在桌面浏览器上做任何事情。

#3

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:

为了复制z-index在iPhone上固定位置的效果，它似乎需要两种技术:

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...

正如上面的@tnt所建议的那样，使用transform:translateZ(n)，其中z索引用于获得移动safari以正确处理堆栈顺序。这似乎有导致这个职位的不幸的副作用:固定停止工作……
Instead of position:fixed, use a javascript technique like this to fake it.

而不是定位:固定，使用这样的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.

我还没有彻底地测试过(因为我不会这么做)，但它似乎运行得相当好。虽然“固定”元素似乎有点口吃。

#4

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，它们在这些平台中工作。翻译器和z索引的顺序很重要。对于设置每个层的位置是。

-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工作示例

#1