CSS3屬性webkit-overflow-scrolling：touch錯誤

iOS 5發佈網頁設計師一個新屬性-webkit-overflow-scrolling:touch，它使用iOS設備硬件加速器爲可滾動的div提供本地滾動。CSS3屬性webkit-overflow-scrolling：touch錯誤

當我們的網站在開發中實施時，它確實有效，但效果不好。我相信可能存在一個CSS問題，因此我在這裏問。

下fiddle會告訴你它的工作完美

如果你彈出到我們的網站在發展，你會發現設備選項卡下，但在iOS相同的面板雖然滾動是完美的溢出部分不以顯示圖片文字地切成兩半。

http://www.golfbrowser.com/courses/mill-ride/

我不知道如何解決這一問題 http://www.golfbrowser.com/photo.PNG

來源

2011-10-18 Robin Knight

我遇到對iOS6的一個類似的問題（問題的網頁能正常工作的iOS5中）。通過應用-webkit-transform修復：translate3d（0，0，0）;到已被切斷的img標籤，現在工作正常。 – codebox

正如@relluf所指出的，在相關元素上應用3D轉換可修復該錯誤。然而，我進一步調查了一下，看起來應用-webkit-transform: translateZ(0px)也是如此（這是谷歌在gmaps map容器上的工作），並且它不需要位於相對定位的元素上，只是可滾動元素的直接後代。

所以，如果你不想手動保持在需要修復的所有地方的列表，你纔可能做到：

element { 
    -webkit-overflow-scrolling: touch; 
} 

element > * { 
    -webkit-transform: translateZ(0px); 
}

來源

2012-04-12 11:32:08 spheroid

這對我有用！感謝很多球體。 – Mark

也適合我。 +1。 – rkulla

也適合我。祕密就是對滾動區域內的項目執行'-webkit-transform'。 –

他們讓什麼不好的毛病鬆動這裏。試圖解決方法的所有方式，直到我終於發現了元素在-webkit-overflow-scrolling:touch DIV能正確顯示所需要的唯一屬性：position: static

相對和絕對定位的元素總是切斷邊界上，並完全缺失（除了空空間）在它之外。如果動態更改位置屬性（從靜態到絕對），則只有可滾動div視口的可見部分保持呈現狀態，無論偏移何處。

來源

2011-10-25 23:04:37 user1012566

我試試吧.... –

這對我有效，我刪除了位置：相對於某些輸入元素（將它們保留爲默認位置：static），並且它們在整個滾動過程中都正確渲染。 – Paul

不錯的工作，這解決了問題！ –

我深入研究了這個bug，我也創建了一個jsfiddle，並將它提交給Apple的一個bug報告。請參閱：iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch 只要蘋果公司回覆我，我就有關該主題的報告，以便可以隨時掌握最新對此非常惱人的錯誤

來源

2011-11-26 15:37:24 lucaferrario

我也遇到過這個問題，其中溢出滾動與-webkit -overlfow-scrolling設置爲touch會導致定位元素的重繪問題。在我的情況下，我有一個列表，其中的各個項目有相對定位，以便我可以使用定位在他們的子元素。通過上面的iOS 5的CSS，當用戶將隱藏的內容滾動到視圖中時，在重新繪製屏幕以查看元素之前存在一個暫時的延遲。這真的很煩人。幸運的是，我發現如果我也給父節點相對位置，這個問題就解決了。

來源

2011-12-05 20:57:21 Robert

我也碰到過這個bug。我通過應用以下css來的父元素固定它：

-webkit-transform: translate3d(0, 0, 0);

然而，我注意到，減慢渲染，可能會選擇在觸摸輸入元素滾動到視圖的中心不是想其他投入要素（通過Safari/iOS）。

來源

2012-01-04 20:43:04 relluf

這適用於我，將其設置在'-webkit-overflow-scrolling：touch'容器內的'position：relative'元素上。 –

請忽略該部分「，並且可能會在觸摸的輸入元素滾動到視圖的中心時選擇其他所需的輸入元素」。我誤解了。 – relluf

的錯誤仍然生活在iOS 6中。如果您的問題與position: relative有關，則可以通過JS臨時設置z-index: 1來解決問題。在我的情況下，-webkit-transform: translate(...)沒有與position: relative一起使用。

來源

2013-03-15 21:10:47 Bernd

在iOS中，如果元素集中的元素與-webkit-overflow-scrolling: touch集合中的元素相對於滾動容器之外的元素絕對定位（或fixed），則該元素只會呈現一次，並且在元素滾動時不會更新呈現。樣本HTML：

<div class="relative-to-me"> 
    <div class="scrollable"> 
    <div class="absolutely-positioned"> 
    </div> 
    </div> 
</div>

如果強行通過更改CSS屬性（在督察爲例）重新渲染，你可以看到，元素的定位進行重新渲染到正確的位置。我懷疑這是優化滾動性能的一些性能特徵的結果。

此問題的解決方案是在絕對（或固定）定位元素上設置will-change: transform。

.absolutely-positioned { 
    will-change: transform; 
}

來源

2017-05-13 16:21:34 joeyhoer

對我來說，這似乎很奇怪你永遠不會改變變形屬性，還是我們？ – gmustudent

我嘗試了一些不同的解決方案，在我的情況下似乎不起作用。

最後，我已經找到一種方法工作正常使用jQuery：

當你觸摸了每一次應用-webkit-溢出滾動特性。

*起初我還-webkit-溢出滾動應用於：汽車時的TouchDown，禁用iOS的渲染。但它使頁面閃爍。所以我放棄了它，然後令人驚訝地工作正常！

檢查以下線，希望它有助於：

<!-- JQuery Functions--> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 

// Apply -webkit-overflow-scrolling in Every TouchEnd 
$(document).on('click touchend', function(event) { 
    $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"}); 
}); 

</script> 



<!-- html Elements & Style --> 

<div id="TestDIV"> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
</div> 

<style> 
#TestDIV{ 
    white-space: nowrap; 
    overflow-x: scroll; 
    -webkit-overflow-scrolling:touch; 
} 

#TestDIV .Element{ 
    width:300px; 
    height:300px; 

    margin: 2px; 

    background-color: gray; 

    display: inline-block; 
} 
#TestDIV .Element:nth-child(odd){ 
    background-color: whitesmoke; 
} 
</style>

來源

2017-11-22 09:19:35

CSS3屬性webkit-overflow-scrolling：touch錯誤

回答

相關問題