css - 在 iPhone/iPad 上滚动时边栏导航菜单闪烁

Question

自从最新的 iPhone/iPad 更新后，边栏导航菜单在上下滚动时会闪烁。

我一直在尝试很多方法，但没有一个真正有效。

第一次尝试是在菜单打开时防止滚动(正文):

.overflow {
   position:relative;
   overflow:hidden;
   height:100%;
}

不幸的是，这并不能解决问题，所以我尝试了这个:

.overflow {
   position:fixed;
   overflow:hidden;
   height:100%;
}

这行得通，但是当用户打开菜单时，页面会跳到顶部，地址栏也会出现。 IMO 不是一个好的用户体验。

我还尝试将其添加到几个元素中:

div {
   -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
           backface-visibility: hidden;
} 

所以，现在我要么尝试用固定位置的方法解决它，要么尝试避免闪烁。我不知道为什么，但“溢出:隐藏”在 iPhone 上并没有真正起作用。

有人对此有很好的解决办法吗？

Answer 1

这与“过渡”有关。例如。不要使用“translateX()”...使用 translate3d() 启用硬件加速并将其添加到动画包装器中。解决了我的问题:

.animClass {
   -webkit-transform: translate3d(0, 0, 0);
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
}

感谢: https://davidwalsh.name/translate3d