javascript - 视口(viewport)中的检测元素不适用于移动版 Safari

Question

我使用 this Answer 中的简单实用函数检测某个元素是否在我的视口(viewport)中。如果是，则会为我的内容启动淡入动画。

它在 Windows、macOS、Android 以及 iOS 上的所有浏览器(Safari 除外) 上都能正常运行。在 Safari 中，内容保持隐藏状态，并且动画仅在尝试缩小网站后才开始。我在 iOS 10 和 11 Beta 5 上对此进行了测试。

我对此问题的解决方案是检测用户是否在 iOS 上使用 Safari 并且不为我的内容设置动画。但我想解决这个问题，以便动画能够正常工作。谁能帮我解决这个问题吗？

编辑:我认为这个问题是由 Semantic-ui 引起的。用纯 html 和 javascript 对其进行了测试，它可以工作。我现在尝试修复它。

Answer 1

我终于找到了解决办法。

问题出在语义 UI 的边栏。我找到了一个 CSS snipped在文档上。我稍微修改了代码并将其添加到我的 css 文件中。

html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
    height: initial !important;
}

好像-webkit-overflow-scrolling引起了问题。但我也必须添加其他代码行，否则滚动时会卡顿。

像这样，一切都很完美!