mobile - 在 Safari 中滚动时元素消失 - -webkit-transform 修复仅在第一次时有效

Question

这只发生在 iPhone 大小的 Safari 中。我知道这个问题的“通常解决方法”是应用 -webkit-transform: translate3d(0,0,0); (根据 Serge 的回答 here )这确实解决了问题，但只有一次。

问题出现在用户单击菜单按钮时打开的“抽屉”菜单中。菜单会正常显示，但是当用手指触摸/滚动时，整个菜单从页面上消失。应用 -webkit-transform: translate3d(0,0,0) 解决了这个问题，但只是第一次。如果菜单关闭并再次打开，问题再次出现。我已经确认 -webkit-transform: translate3d(0,0,0) 属性仍然可用(但是它在 Safari 开发人员工具中显示为灰色 - 显示为灰色，没有被划掉线穿过它)。

我在页面中添加了一些 JavaScript，这样当菜单打开时，它会将 -webkit-transform: translate3d... 属性应用于菜单，虽然这确实永久地解决了这个问题，但我不认为它干净到足以成为真正的修复。

我还尝试将 -webkit-overflow-scrolling: touch 与 -webkit-transform: translate3d(0,0,0) 的各种组合应用于父级元素、子元素等，并且在“第一次尝试”之后无法解决问题。

Answer 1

其他人的另一种选择:

如果您在 jQuery $( window ).on( "resize", function(){} ); 中有任何代码，则可以在滚动时触发。在我的例子中，我在调整窗口大小时隐藏了一个菜单，这在桌面上运行良好，但在 iOS Safari 中滚动时也会被调用。

归功于 this answer为我指出这个令人沮丧、隐藏得很好的问题。