Question

我知道iPhone用于不支持位置：已修复，但现在确实如此，当我在具有更高z-index的其他元素后面滚动固定位置元素时，我看到了一个奇怪的故障。具有较低z-index的固定位置元素暂时出现在前面，这看起来非常糟糕。有办法防止这种情况吗？

我尝试将-webkit-transform: translate3d(0, 0, 0);添加到固定元素，但它似乎没有帮助解决这个问题。

更新除了z-index之外，我添加了transform:translateZ(x)并且它没有解决问题。

UPDATE2 我添加了-webkit前缀，这可以解决移动版Safari上的z-index问题，但也会导致位置：已修复在桌面Chrome中无法正常工作。

Answer 1

z-index在position：fixed时不可靠，如此小提琴所示：http://jsfiddle.net/mZMkE/2/使用translateZ转换。

transform:translateZ(1px);

在你的页面元素上。

编辑：在你的代码中，添加此css：

.bla, .projects, .contact  {
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
}

然后从这些元素和.intro中删除z-index引用。

Answer 2

＆＃34; 更新：除了z-index之外，我添加了 transform：translateZ（x），但它没有修复问题。

Update2：我添加了 -webkit - 前缀，这可以修复移动版Safari上的z-index问题，但也会导致位置：fixed < / em>在桌面Chrome中无法正常工作。的＆＃34;

尝试将-webkit-transform:translateZ(x)包裹在移动特定媒体查询中例如：

@media only screen and (min-device-width : ... ) and (max-device-width : ... ) { .whatever { -webkit-transform: translateZ(x) } }

所以在这种情况下，它不会在桌面Chrome上做任何事情

Answer 3

我不是在倡导这个解决方案，但这是我目前所拥有的最好的解决方案......

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

正如上面@tnt所建议的，使用transform:translateZ(n)，其中z-index用于获取移动safari以正确处理堆栈顺序。这似乎有导致这个位置的不幸副作用：固定停止工作......
而不是位置：已修复，请使用javascript技术like this进行伪造。

我没有彻底测试过这个问题（因为我不打算这样做），但似乎工作得相当好。虽然“固定”元素似乎有点口吃。

Answer 4

当我需要在不同层的堆栈中设置不同的位置时，我尝试将解决方案作为特定情况下的答案接受，但仅此一点在桌面浏览器（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-index和translateZ使用相同的值只是为了保持一致性，没有必要。请参阅工作示例http://jsbin.com/peyehufo/5

移动safari位置：滚动时固定的z-index毛刺

4 个答案: