提问者:小点点

移动safari位置:修正了滚动时的z索引故障


我知道iPhone过去不支持位置:固定,但现在它支持了,当我将一个固定位置元素滚动到其他具有更高z索引的元素之后时,我看到了一个奇怪的问题。具有较低z索引的固定位置元素暂时出现在前面,这看起来非常糟糕。有办法防止这种情况吗?

我尝试添加了< code >-WebKit-transform:translate 3d(0,0,0);添加到固定元素,但这似乎无助于解决这个问题。

这里也有一个jsfiddle。

更新我在z索引之外添加了transform:translateZ(x),但它没有解决问题。

Update2我添加了< code>-webkit前缀,这确实修复了移动Safari上的z索引问题,但也导致了position:fixed在桌面Chrome中无法正常工作。


共3个答案

匿名用户

z-index 在 position:fixed 时不可靠,如以下小提琴所示: http://jsfiddle.net/mZMkE/2/ 改用平移 Z 变换。

transform:translateZ(1px);

在您的页面元素上。

编辑:在您的代码中,添加以下css:

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

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

匿名用户

更新1:除了z-index之外,我还添加了转换:translateZ(x),它没有解决问题。

更新2:我添加了< code>-webkit-前缀,这确实修复了移动Safari上的z索引问题,但也导致了< code>position:fixed在桌面Chrome中无法正常工作。"

然后尝试在移动特定的媒体查询中包装-webkit-TranslateZ(x)
例如:

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

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

匿名用户

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