2

这只发生在 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)，并且无法解决“第一次尝试”之外的问题。

4

2 回答 2

2

其他人的另一种选择：

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

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

于 2018-11-09T11:07:30.947 回答
0

因此，由于这个众所周知的 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 在用户调用它时显示的父滚动容器上。

于 2018-05-02T22:12:19.013 回答