视口中的检测元素不适用于移动版 Safari

Question

我使用 this Answer 中的 简单实用函数 来检测元素是否在我的视口中。如果是，将为我的内容启动淡入动画。

它在 Windows、macOS、Android 和 iOS 上的每个浏览器上工作正常 除了 Safari。在 Safari 中，内容保持隐藏状态，动画仅在我尝试缩小 网站后 开始。我在 iOS 10 和 11 Beta 5 上对此进行了测试。

我对这个问题的解决方案是检测用户是否在 iOS 上使用 Safari 并且不对我的内容进行动画处理。但我想解决这个问题，以便动画有效。谁能帮我解决这个问题？

编辑： 我认为这个问题是由语义引起的-ui.Tested 它与普通的 html 和 javascript 并且它有效。我现在尝试修复它。

Answer 1

我终于找到了解决办法。

问题出在 Semantic 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 引起了问题。但是我也必须添加其他代码行，否则当我滚动时它会卡顿。

像这样，一切都很完美！