移动的Safari浏览器位置：滚动时固定z-index毛刺
我知道iPhone曾经不支持位置：固定，但现在它和我看到一个奇怪的小故障，当我滚动固定的位置元素后面的其他元素更高的Z指数。 z指数较低的固定位置元素出现在前面，看起来真的很糟糕。 有没有办法来防止这一点？
我试着join-webkit-transform: translate3d(0, 0, 0); 到固定的元素，它似乎并没有帮助这个问题。
这也是一个jsfiddle。
更新我添加了transform:translateZ(x)除了z-索引，并没有解决问题。
Update2我添加了-webkit前缀，这样做可以修复移动Safari上的z-index问题，但也会导致位置：固定在桌面版Chrome中无法正常工作。
z-index对位置不可靠：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引用。
“ 更新：我添加了转换：translateZ（x）除z-index外，并没有解决问题。
Update2：我添加了-webkit-前缀，这样可以修复移动版Safari上的z-index问题，但也会导致位置：fixed在桌面版Chrome中无法正常工作。 “
尝试在移动特定媒体查询中打包-webkit-transform:translateZ(x) 。
例如：
@media only screen and (min-device-width : ... ) and (max-device-width : ... ) { .whatever { -webkit-transform: translateZ(x) } }
所以在这种情况下，它不会在桌面Chrome上做任何事情
我不是主张这个解决scheme，但这是目前我所掌握的最好的…
为了复制固定在iPhone上的z-index的效果，似乎需要两种技术：
-
如上面的@tnt所示，使用
transform:translateZ(n)其中z-index用于使移动Safari能够正确处理堆栈顺序。 这似乎有导致职位的不幸的副作用：固定停止工作… -
而不是位置：固定，使用这样的javascript技术来伪造它。
我没有彻底地testing过（因为我不打算这样做），但是它似乎工作得很好。 虽然“固定”元素似乎结结巴巴。
当我需要在不同层次的堆栈中设置不同的位置时，我试图将解决scheme接受为特定情况下的答案，但是在桌面浏览器（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