在 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;
}

所以，现在我要么尝试用固定位置的方法解决它，要么尝试避免闪烁。我不知道为什么 'overflow:hidden' 在 iPhone 上不起作用。

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

Answer 1

通常不指定导航菜单的宽度和高度会导致这种效果。

Answer 2

跟'transition'有关系。例如。不要使用 'translateX()'... 使用 translate3d() 启用硬件加速并将其添加到动画包装器中。解决了我的问题：

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

Sidebar Navigation menu is flickering while scrolling on iPhone/iPad