滚动时iOS Safari会闪烁

时间:2017-11-08 15:36:38

标签: css css-transitions mobile-safari css-transforms

我对生产网站上的菜单有一个奇怪的问题,这只发生在iOS Safari中。

您可以通过访问iPhone上的https://www.romanianfriend.com,打开汉堡包菜单,然后打开“罗马尼亚最热门景点”或“罗马尼亚冒险和自然之旅”等子菜单中的一个来重新创建它,最后向下滚动菜单。您将看到子菜单的项目变为白色,然后(有时)再次返回。

您还可以看到我对该问题进行的简短截屏视频:https://youtu.be/aWL9IW-4Ajc

我尝试了

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);

在ul.menu-level-3和div.sb-sliderbar-menu上,但没有效果。

该菜单使用sliderbars.js打开子菜单的Bootstrap可折叠组件。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

当您在同一元素上使用overflow: auto-webkit-overflow-scrolling: touch时,这似乎只是一个问题。

我通过替换:

解决了这个问题
overflow: auto;
-webkit-overflow-scrolling: touch;

使用:

overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;

希望它有所帮助。