侧边栏导航菜单在 iPhone/iPad 上滚动时闪烁答案

【问题标题】：Sidebar Navigation menu is flickering while scrolling on iPhone/iPad侧边栏导航菜单在 iPhone/iPad 上滚动时闪烁
【发布时间】：2016-06-19 07:18:34
【问题描述】：

自从最新的 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 上并没有真正起作用。

有没有人可以解决这个问题？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

定义了高度和宽度。可以举个具体的例子吗？
我一直在寻找解决方案很多天，我发现它与 CSS 过渡有关。其他人显然也有类似的问题。这里有一些方法。 stackoverflow.com/questions/9807620/… davidwalsh.name/translate3d 应该可以解决：-webkit-transform: translate3d(0, 0, 0);