在視口中檢測元素在移動Safari中不起作用

Question

我使用“ 答案”中的“ 簡單工具功能”來檢測元素是否在視口中。 如果是，則為我的內容開始淡入動畫。

它可以在Windows，macOS，Android和iOS上的所有瀏覽器（Safari除外）上正常運行 。 在Safari中，內容保持隱藏狀態，並且僅在我嘗試縮小網站范圍后才開始播放動畫。 我在iOS 10和11 Beta 5上對此進行了測試。

我對這個問題的解決方案是檢測用戶是否在iOS上使用Safari且不對我的內容設置動畫。 但是我想解決這個問題，以便動畫能夠正常工作。 誰能幫我這個？

編輯：我認為該問題是由Semantic-ui引起的。使用純html和javascript測試了它，並且可以正常工作。 我現在嘗試修復它。

Answer 1

我終於找到了解決方案。

問題是語義UI的側邊欄 。 我在文檔上發現了CSS 。 我稍微修改了代碼並將其添加到我的css文件中。

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

好像是-webkit-overflow-scrolling引起了問題。 但是我也必須添加其他代碼行，否則滾動時會結結巴巴。

這樣，一切正常！