邊欄導航菜單在iPhone/iPad上滾動時閃爍

自從最新的iPhone/iPad更新以來，邊欄導航菜單在上下滾動時閃爍。邊欄導航菜單在iPhone/iPad上滾動時閃爍

我一直在嘗試很多方法，但沒有什麼效果。

的第一次嘗試是爲了防止滾動（身體），當打開菜單：

.overflow { 
    position:relative; 
    overflow:hidden; 
    height:100%; 
}

不幸的是這並沒有解決這個問題，所以我已經試過這樣：

.overflow { 
    position:fixed; 
    overflow:hidden; 
    height:100%; 
}

這但是當用戶打開菜單時，頁面跳轉到頂部，地址欄也會出現。 IMO沒有一個好的用戶體驗。

我也試圖把它添加到幾個要素：

div { 
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ 
      backface-visibility: hidden; 
}

所以，現在我既可以嘗試與位置固定的方法來解決這個問題還是儘量避免閃爍。我不知道爲什麼，但'溢出：隱藏'在iPhone上並不適用。

有沒有人有一個很好的解決這個？

來源

2016-03-05 grindking

它與'過渡'有關。例如。不要使用'translateX（）'...使用translate3d（）來啓用硬件加速並將其添加到動畫包裝中。解決我的問題：

.animClass { 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
}

感謝名單到： https://davidwalsh.name/translate3d

來源

2016-03-08 19:42:35 grindking

通常不指定導航菜單的寬度和高度會導致此類效果。

來源

2016-03-05 20:34:07

有定義的高度和寬度。你能給我一個具體的例子嗎？ – grindking

我一直在尋找一個解決方案，現在我發現了很多天，它與CSS轉換有關。其他人顯然也有類似的問題。這裏有一些方法。 http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela https://davidwalsh.name/translate3d 應該可以通過以下方式解決： -webkit-transform：translate3d（0，0，0）; – grindking

邊欄導航菜單在iPhone/iPad上滾動時閃爍

回答

相關問題