移动safari位置：固定z-index毛刺滚动时 [英] Mobile safari position:fixed z-index glitch when scrolling

问题描述

我知道iPhones用来不支持位置：固定，但现在它和我看到一个奇怪的毛刺，当我滚动一个固定的位置元素后面其他元素具有更高的z-索引。具有较低z-index的固定位置元素在前面出现，这看起来真的很糟糕。有没有办法防止这种情况？

我尝试添加 -webkit-transform：translate3d（0，0，0）; 到固定元素，似乎不会帮助这个问题。

更新
我添加了 transform：translateZ

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

解决方案

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 refs。 p>

I know iPhones used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?

I tried adding -webkit-transform: translate3d(0, 0, 0); to the fixed element and it doesn't seem to help this problem.

Here is a jsfiddle as well.

Update I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.

Update2 I added -webkit prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.

解决方案

z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.

transform:translateZ(1px);

on your page elements.

EDIT: In your code, Add this css:

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

and then remove z-index refs from those elements and .intro.

这篇关于移动safari位置：固定z-index毛刺滚动时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！