-webkit-溢出滾動：觸摸，大量內容被指定寬度

Question

大內容，如成千上萬行的滾動DIV裏面放的時候是被截斷表時切斷（見css, ios, iPad, -webkit-overflow-scrolling: touch bug, large content gets cut off）

<div class="longList"> 
    <!-- table with thousands of rows --> 
</div> 

CSS：

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch;} 

我經過一番研究，解決了這個以下http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/。

所以，增加位置：固定解決了這個問題，但催生了一個新問題：在引入位置之前，表格被填滿了整個頁面寬度：fixed，在添加位置之後，停止這樣做。

更新CSS：

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch; position:fixed;} 

我試圖通過對DIV指定寬度（帶班longList），但每當我在DIV指定任何寬度，我回到原來的問題解決了，而表格現在填滿了整個頁面（寬度方向），內容又被切斷了！

有人遇到過這樣的情況嗎？

Answer 1

所以我找到了適用於此的解決方案。我在嵌入式內容的iFrames和div上遇到了類似的問題。我不知道這對iFrames有多好，但對於divs來說，它似乎有訣竅。

使用的代碼以下行後的頁面加載而出錯的元素在頁面上可見。這會強制重繪/重排元素，並顯示完整內容。

//Fix for mobile webkit browsers not rendering full content 
$('.divWithContent').parent().hide().show(0); 

您可能需要添加的包裝只是爲了所遇到的問題，如果你沒有一個已經股利或iframe，你不閃爍或重建比你需要更多的內容的方式。

結構示例：

<div class="wrapper"> 
    <div class="divWithContent"> 
    ... 
    </div> 
<div> 

如果你的DIV是在頁面加載可見，這裏是你可以使用此解決方案的一種方式。您可能需要添加一個輕微的延遲太：

$(document).ready(function() { 
    $('.divWithContent').parent().hide().show(0); 
} 

這將不工作，如果該元素當前處於隱藏狀態。似乎該元素不得不在設備視口中當前可見，但它至少必須位於頁面上，而不是隱藏的。