可滚动绝对定位div中相对定位的元素在滚动上"滞后"

Question

可滚动绝对定位div中相对定位的元素在滚动上"滞后"

Tho*_*mas 16 html css mobile android cordova

我有一个PhoneGap应用程序,显示一个很长的文本,包含我在Android上测试的标题,表格和图像.

一切正常,除了带有样式的元素position:relative 这些元素在滚动时"滞后",这意味着如果我滚动页面然后这些元素开始和结束滚动大约四分之一秒.

将绝对div与亲戚和孩子结合使用时会发生错误overflow:auto.删除任何这些东西修复了错误,但我宁愿把它留下来.虽然我愿意删除表并单独显示(如在对话框中),如果必须的话.

该错误仅出现在标准的Android浏览器上(当然还有我的PhoneGap应用程序).到目前为止,我已经使用以下设备对其进行了测试:

三星Galaxy Nexus(4.1.1)

三星Galaxy S III(4.1.2)

任何帮助都表示赞赏,但我更喜欢HTML和功能不会改变(或不太多)的解决方案.

快速滚动后

我创建了一个显示bug 的最小例子.只需在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 30

简而言之,你所遭遇的弊病是常见的并有记载.桌面和移动浏览器中存在overflow:auto或overflow:scroll遭受油漆/回流/渲染问题的元素.更重要的是,移动浏览器(iOS和Android上的webkit)存在问题,如果它们是"屏幕外",则不会呈现相对和绝对元素.当它们在屏幕上滚动时,这可能导致滞后.

您可以申请一些"黑客"垫片:

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

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

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

Run Code Online (Sandbox Code Playgroud)

一些阅读:

http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/ http://developersday.wordpress.com/2012/08/07/scrollable-divs-rendering-问题与- CSS-溢出自动或滚动-iosandroid /

我从某个地方复制到我的笔记中的片段现在无法找到来源:

特别是在严重依赖滚动的网站上,您可能会发现您的主要内容依赖于溢出:滚动.这是一个真正的挑战,因为这种滚动不是以任何方式加速GPU加速,因此每当用户滚动时内容都会重新绘制.您可以使用普通页面滚动(溢出:可见)和位置:固定来解决此类问题.

归档时间：	12 年，8 月前
查看次数：	11287 次
最近记录：	9 年，8 月前