相對定位的元素在滾動絕對定位的div「滯後」滾動

我有一個PhoneGap應用程序，顯示一個相當長的文本，包含我在Android上測試的標題，表格和圖像。相對定位的元素在滾動絕對定位的div「滯後」滾動

一切工作正常，除了風格的元素position:relative 這些元素「滯後」滾動時，這意味着如果我滾動頁面，然後這些元素開始和結束滾動大約四分之一秒後。

將絕對div與相對的孩子以及overflow:auto的孩子組合時會發生錯誤。刪除任何這些東西都會修復這個錯誤，但我寧願將它留下。雖然我願意刪除表並單獨顯示它（如在對話框中），如果必須的話。

該錯誤只出現在標準的Android瀏覽器（當然我的PhoneGap應用程序）。到目前爲止，我已經用以下設備進行了測試：

三星GALAXY Nexus（4.1.1）

三星Galaxy S III（4.1.2）

任何幫助表示讚賞，但我更喜歡HTML和功能沒有改變（或不太多）的解決方案。

after quick scrolling

我創建了一個minimal example表示錯誤。只需打開它在你的Android和開始滾動，你應該立即看到問題：

<!doctype html> 
<html> 
<head><meta name="viewport" content="initial-scale=1.0"></head> 
<body style="margin:0"> 

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%"> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p> 
    <div style="position:relative;background:red;">relative box<br>moves slower than the other text</div> 
    <p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p>   
    <div style="overflow:auto"> 
    <table> 
     <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr> 
     <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> 
    </table> 
    </div> 

</div> 
</body> 
</html>

來源

2013-02-25 Thomas

能否請您提供的jsfiddle或tinkerbin或liveweave – 2013-03-03 17:31:42

我更新的鏈接帖子。不幸的是，這些服務不會讓你添加元首。 – Thomas 2013-03-04 12:14:46

謝謝，補充回答。 – 2013-03-04 15:43:22

簡而言之，你所患的疾病是常見的，並且有文件證明。帶有overflow:auto或overflow:scroll的元素在桌面和移動瀏覽器中都會遇到塗料/迴流/渲染問題。爲此，在移動瀏覽器（iOS和Android上的webkit）中存在一些問題，如果它們是「屏幕外」，則不呈現相對和絕對元素。當他們在屏幕上滾動時，這可能會導致滯後。

有一些「黑客」，你可以申請墊片：

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

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

element > * { 
    -webkit-transform: translate3d(0,0,0); 
}

一些閱讀你：

http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/ http://developersday.wordpress.com/2012/08/07/scrollable-divs-rendering-issues-with-css-overflow-auto-or-scroll-iosandroid/

而且我從複製片段在我的筆記的某處，現在找不到來源：

特別是在嚴重依賴滾動的網站上，您可能會發現您的主要內容依賴於overflow：scroll。這是一個真正的挑戰，因爲這種滾動並非以任何方式加速GPU，因此只要用戶滾動，就會重新繪製內容。您可以使用普通頁面滾動（溢出：可見）和 position：fixed來解決這類問題。

來源

2013-03-06 17:01:10

謝謝！順便說一句引用來自http://addyosmani.com/blog/devtools-visually-re-engineering-css-for-faster-paint-times/ – Thomas 2013-03-07 07:33:11

最後兩個CSS片段的工作。我感到非常愚蠢，因爲我之前閱讀過這些內容，但不知怎麼的，他們不知道他們必須向滾動元素的孩子們申請：D 在性能和支持方面我使用哪一種？即使在沒有問題的情況下使用它也是可取的嗎？我擔心會降低渲染速度，特別是在有很多元素的情況下。 – Thomas 2013-03-07 07:48:46

@Thomas - 感謝您找到報價...... Addy是一位了不起的網絡活動家，如果您還沒有閱讀過關於Javascript設計模式的電子書，您應該閱讀它。 – 2013-03-07 21:06:35

我覺得你有你試圖解決兩個問題。下滑的文本和滯後的滾動速度？

我不確定你想要用版權符號做什麼，但我不會有line-height小於1或1em。嘗試使用一個父元素，並設置該範圍的樣式。您可以在跨度上使用display:inline-block; vertical-align: middle;以獲得所需的效果。

<p><span>&copy;</span>Some text</p>

滾動它取決於你在做什麼。移動瀏覽器等待300ms爲<a>標籤，以查看您是滾動還是單擊鏈接。這可能與此有關。如果是這樣，我會結賬Google FastClick。

移動瀏覽器加速頁面滾動的正文。所以使用嵌套的div或position:absolute可以防止你獲得更快的滾動速度。在較新版本的Android和iOS中，您可以使用-webkit-overflow-scrolling：touch來提供幫助，但對舊手機無效。我會盡量不要使用絕對位置，因爲根據您的示例，它看起來不像它的所需，也使用嵌套的div滾動，要求某些用戶在div內使用兩個手指來滾動內容。我會盡量避免這種情況，並使用更多的移動友好設計模式替換設計，如將內容向下擴展的鏈接。

大量的滾動問題已經明朗化，而試圖支持position:fixed移動，如果認爲這可能會導致它，你想了解它：http://bradfrostweb.com/blog/mobile/fixed-position/

來源

2013-03-04 06:18:38 Jesse

我只是在某些元素（位置：相對）有一個不同的滾動滯後的問題，所以當你滾動它看起來有點像paralax滾動。這很難解釋，所以我添加了一個截圖。對於版權符號，我從我們的網站複製了一些CSS，我們在某些瀏覽器出現問題時無法正確渲染超級腳標和下標腳本，因此無法在使用vertical-align：top的表單元格中正確呈現超級腳標和下標。 – Thomas 2013-03-04 08:50:30

最外面的div是我的應用程序的內容區域。它絕對有可能爲頁眉和頁腳留出空間。或者，還有更好的方法？當我刪除表時，該錯誤實際上消失，所以水平溢出似乎是問題所在。 – Thomas 2013-03-04 08:56:21

請勿使用絕對位置。如果它僅適用於移動堆棧，則標題，內容div和頁腳相互之間寬度爲100％。 – Jesse 2013-03-04 18:21:48

刪除position:absolute和position:relative，他們是絕對不需要這種佈局，並造成你所有的問題。

如果您願意，您可以將一些margin-top添加到您的身體。

PhoneGap產生這樣的一些html垃圾，我希望你有一個很好的CSS控制。

來源

2013-03-04 15:42:20

發佈的代碼只是一個簡單的例子。我需要絕對定位，因爲我需要動畫，而且我還需要在對話框中顯示內容。我需要相對定位來絕對地定位孩子。總之，我需要它來複制我們網站的一些設計元素。你的意思是什麼PhoneGap的HTML垃圾？這是我的垃圾：D – Thomas 2013-03-05 07:21:12

位置：相對位置：絕對已知會導致移動瀏覽器出現問題 - 支持可能會有很大差異。你知道如何做遠程Web Develop檢查嗎？這就是你如何玩你的CSS，看看有沒有用。具體方法如下：https：//developers.google.com/chrome-developer-tools/docs/remote-debugging設置完成後，您就是王者。你知道如何使用開發工具嗎？ – 2013-03-05 10:40:23

不幸的是我無法刪除這些。特別是如果外部div是一個必須是絕對的對話。是的，我知道如何使用DevTools，但我從來沒有遠程完成它。您提供的鏈接中的方法不幸只適用於Chrome（它工作正常）。但是我使用PhoneGap Build的調試功能在打包的應用程序中測試了它。這是使用[weinre]（http://people.apache.org/~pmuellr/weinre/docs/latest/），我會看看。 – Thomas 2013-03-05 13:10:38

其實有一個簡單的CSS修復它，添加position:relative您的段落解決問題。

試試這個：

<!doctype html> 
<html> 
<head><meta name="viewport" content="initial-scale=1.0"> 
<style> 
p{ position:relative;} 
</style> 
</head> 
<body style="margin:0"> 

<div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%"> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p> 
    <div style="position:relative;background:red;">relative box<br>moves slower than the other text</div> 
    <p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p>   
    <div style="overflow:auto"> 
    <table> 
     <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr> 
     <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> 
    </table> 
    </div> 

</div> 
</body> 
</html>

來源

2013-03-07 08:08:42

這似乎起初工作，但表和其他一些元素仍然是laging。即使我將它應用於'#topdiv> *'表格仍然很流行。也許有一個解決方案，但我會與變換解決方案 – Thomas 2013-03-07 10:35:01

相對定位的元素在滾動絕對定位的div「滯後」滾動

回答

相關問題