在视口中检测元素不适用于移动野生动物园

Question

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

适用于Windows，macOS，Android 和iOS上的所有浏览器（Safari除外）。在Safari中，内容保持隐藏状态，仅在我尝试缩小我的网站后才会启动动画。我在iOS 10和11 Beta 5上进行了测试。

我对此问题的解决方案是检测用户是否在iOS上使用Safari并且不动画我的内容。但我想解决这个问题，以便动画工作。任何人都可以帮我这个吗？

编辑：我认为这个问题是由Semantic-ui造成的。用简单的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导致了这个问题。但我不得不添加其他代码行，否则当我滚动时它会断断续续。

像这样，一切都很完美！