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

Question

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

用户单击菜单按钮时打开的“抽屉”菜单会出现此问题。菜单将正常显示，但是当用手指触摸/滚动时，整个菜单将从页面中消失。应用-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)，并且无法解决“第一次尝试”之外的问题。

标签： mobilescrollsafariwebkitwebkit-transform

Answer 1

其他人的另一种选择：

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

感谢这个答案将我指向这个令人沮丧的、隐藏得很好的问题。