在 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 为我指出了这个令人沮丧、隐藏得很好的问题。

Answer 2

因此，由于这个众所周知的 Safari 问题仅发生在具有 position: relative 的元素上，因此我最终通过在滚动容器元素上设置 position: fixed 来解决此问题。无需添加-webkit-overflow-scrolling: touch 或-webkit-transform: translate3d(0,0,0)。

如问题部分所述，-webkit-transform: translate3d(0,0,0) 修复了该问题，但只是第一次打开菜单。一旦它在没有刷新页面的情况下关闭并重新打开，就会出现问题，就好像根本没有应用任何修复一样。

如果您正在处理同样的问题，请考虑使用position: fixed。如果您在使用由用户显示和隐藏的元素（如汉堡菜单）时遇到此问题，您应该可以设置 position: fixed 在用户调用它时显示的父滚动容器上。