IOS -webkit溢出滾動在錯誤的軸上滾動，或根本不滾動

我正在用html5構建iOS的移動應用程序。我正在使用「-webkit-overflow-scrolling：touch」來獲得本地慣性滾動，但它非常麻煩。我已經解決了滾動停止後內容無法呈現的問題，但一個持續性錯誤是這樣的：IOS -webkit溢出滾動在錯誤的軸上滾動，或根本不滾動

當我嘗試上下滾動時，沒有任何反應，但是當我嘗試水平滾動時，內容滾動垂直（離軸90度）。如果我瀏覽我的應用程序並回到頁面，它有時會被修復。另外，儘管內容充滿，但有時它根本不會滾動。

從我的搜索結果來看，似乎蘋果已經意識到了這個漏洞，並且無意在短時間內解決它。有沒有人找到解決方案來讓-webkit-overflow-scrolling正常工作？

來源

2012-09-06 doubledriscoll

也有這個問題！ – wfoster

也有同樣的問題。尚未找到任何分辨率。 – BishopZ

我也在這個bug上苦苦掙扎了好幾個月。我發現最好的描述是：

https://bugs.webkit.org/show_bug.cgi?id=87391

它說，它發生在當頁面有一個iframe，內容從Javascript設置。我目前在The Graphics Codex version 1.6中的解決方法是使用iScroll4顯式滾動頁面，而不是使用觸摸滾動。因爲Javascript是單線程的，所以如果你還在執行動畫或後臺加載內容，這可能會很慢。

來源

2012-11-11 03:00:18 user1615357

我也結束了使用iScroll4。這不是理想的，但它確實設法模擬iOS的滾動比iOS更好。提示：我還最終通過將transform3d樣式設置爲0,0,0來渲染滾動部分硬件的內容。這樣，它們就會被渲染，並且如果您有很多內容，則不會出現抖動滾動。 – doubledriscoll

我在iOS上滾動jQuery對話框時遇到了同樣的問題。插件並不是一個很好的解決方案，但仍然有點奇怪。 – Jason

我遇到了同樣的問題：使用-webkit-overflow-scrolling: scroll的節點只會用左/右滾動手勢間歇性地向上/向下滾動。

這裏是我發現可能的原因：目前

的iframe頁面上的任何地方，可見的或以其他方式（source）
visibility: hidden應用於滾動節點的任何父（source）

但是，這些情況都沒有出現在我的網絡應用程序中。我在一個純CSS模式對話框中有一個可滾動的<ul>，我用它編寫了一個巧妙的技巧來添加一個透明襯底 - ::after僞元素position: fixed。

當我從僞元素中刪除position: fixed時，問題就消失了！當然，這使得我的聰明竅門毫無用處，但瞭解到這種情況可能引發這個錯誤是很有趣的。

裝置：的iOS 5.1.1於2012年的iPad 3（視網膜）

違規代碼：

/* Underlay */ 
.dialog::after { 
    z-index: -1; 
    position: fixed; /* <--- This was the problem! */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: rgba(0,0,0,0.4); 

    content: ""; 
}

TL; DR：如果包含元件具有固定的位置僞元素，刪除它可以解決你的滾動問題。

來源

2012-11-15 03:30:30 lazd

我知道這個問題有點古怪，但我不得不讓我的網站在iOS 5上運行。不幸的是，我無法刪除或替換iframe。我注意到iframe的存在只會在元素被呈現在要滾動的元素之前才引起問題。稍後將iframe添加到文檔中（在使用-webkit-overflow-scrolling：touch的元素之後）解決了問題:)

來源

2013-11-23 21:36:38 kaapa

IOS -webkit溢出滾動在錯誤的軸上滾動，或根本不滾動

回答

相關問題