ios – 移动safari位置:固定z索引毛刺滚动时

我知道iPhone已经不支持位置:固定,但现在它和我看到一个奇怪的毛刺,当我滚动一个固定的位置元素后面其他元素具有较高的z-index。具有较低z-index的固定位置元素在前面出现,这看起来真的很糟糕。有办法防止这种情况吗?

我试过添加-webkit-transform:translate3d(0,0,0);到固定的元素,它似乎并没有帮助这个问题。

Here is a jsfiddle as well.

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

Update2
我添加了-webkit前缀,这个DOES修复了移动Safari上的z-index问题,但也导致position:fixed在桌面Chrome中不正确地工作。

最佳答案
z-index不可靠,位置:固定,如下图所示: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引用。

转载注明原文:ios – 移动safari位置:固定z索引毛刺滚动时 - 代码日志