我有一个使用PhoneGap制作的应用程序,其中包含带有标题、表格和图像的相当长的文本,我正在Android上进行测试。除了具有样式
当组合绝对div与相对子元素以及带有
此错误仅出现在标准的Android浏览器(当然还有我的PhoneGap应用程序)中。到目前为止,我已经使用以下设备进行了测试:
position:relative
的元素之外,一切都正常。当滚动页面时,这些元素会“滞后”,也就是说,如果我滚动页面,那么这些元素会在大约四分之一秒后开始和结束滚动。当组合绝对div与相对子元素以及带有
overflow:auto
的子元素时,会出现此错误。删除其中任何一个都可以修复该错误,但如果可能的话,我更愿意保留它。尽管如果必须的话,我愿意删除表格并将其单独显示(例如在对话框中)。此错误仅出现在标准的Android浏览器(当然还有我的PhoneGap应用程序)中。到目前为止,我已经使用以下设备进行了测试:
- Samsung Galaxy Nexus (4.1.1)
- Samsung Galaxy S III (4.1.2)
<!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>