在 Safari 中滚动时元素消失 - -webkit-transform 修复仅在第一次时有效
Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time
这只发生在 iPhone 大小的 Safari 中。我知道这个问题的 "usual fix" 是应用 -webkit-transform: translate3d(0,0,0); （根据 Serge 的回答 here），这确实解决了问题，但只有一次。
当用户单击菜单按钮时打开的 "drawer" 菜单会出现此问题。菜单会正常显示，但是当手指touched/scrolled时，整个菜单从页面上消失。应用 -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) 的各种组合，但无法解决超出 "first try" 的问题.
因此，由于这个众所周知的 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 在用户调用它时显示的父滚动容器上。
其他人的另一种选择：
如果您在 jQuery $( window ).on( "resize", function(){} ); 中有任何代码，这可以在滚动时触发。在我的例子中，我在调整 window 大小时隐藏了一个菜单，这在桌面上运行良好，但在 iOS Safari 中滚动时也会被调用。
感谢 this answer 指出了这个令人沮丧、隐藏得很好的问题。
这只发生在 iPhone 大小的 Safari 中。我知道这个问题的 "usual fix" 是应用 -webkit-transform: translate3d(0,0,0); （根据 Serge 的回答 here），这确实解决了问题，但只有一次。
当用户单击菜单按钮时打开的 "drawer" 菜单会出现此问题。菜单会正常显示，但是当手指touched/scrolled时，整个菜单从页面上消失。应用 -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) 的各种组合，但无法解决超出 "first try" 的问题.
因此，由于这个众所周知的 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 在用户调用它时显示的父滚动容器上。
其他人的另一种选择：
如果您在 jQuery $( window ).on( "resize", function(){} ); 中有任何代码，这可以在滚动时触发。在我的例子中，我在调整 window 大小时隐藏了一个菜单，这在桌面上运行良好，但在 iOS Safari 中滚动时也会被调用。
感谢 this answer 指出了这个令人沮丧、隐藏得很好的问题。