ios - 流动性 Safari 位置:fixed z-index glitch when scrolling

我知道iPhone曾经不支持position:fixed，但是现在支持了，当我在具有更高z-index的其他元素后面滚动固定位置元素时，我看到一个奇怪的故障。 Z-index较低的固定位置元素会暂时出现在前面，这看起来确实很糟糕。有办法防止这种情况吗？

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

Here is a jsfiddle as well.

更新
除了z-index外，我还添加了transform:translateZ(x)，但它无法解决问题。

更新2
我添加了-webkit前缀，这确实解决了移动Safari上的z-index问题，但也导致position:fixed在台式机Chrome中无法正常工作。

最佳答案

z-index在position:fixed上不可靠，如该 fiddle 所示: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引用。