16

我有一个 PhoneGap 应用程序，它显示一个很长的文本，其中包含我正在 Android 上测试的标题、表格和图像。

除了带有样式的元素之外，一切正常。position:relative 这些元素在滚动时“滞后”，这意味着如果我滚动页面，那么这些元素会在大约四分之一秒后开始和结束滚动。

将绝对 div 与相对子代以及子代与overflow:auto. 删除这些东西中的任何一个都可以修复错误，但我更愿意将它留在里面。尽管如果必须的话，我愿意删除表格并单独显示（如在对话框中）。

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

  • 三星 Galaxy Nexus (4.1.1)
  • 三星盖乐世 S III (4.1.2)

任何帮助表示赞赏，但我更喜欢 HTML 和功能不变（或不太多）的解决方案。

快速滚动后

我创建了一个显示错误的最小示例。只需在您的 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>
4

4 回答 4

33

简而言之，你所遭受的疾病是常见的并且有记录的。overflow:auto在桌面和移动浏览器中存在或overflow:scroll遭受绘制/重排/渲染问题的元素。更复杂的是，移动浏览器（iOS 和 Android 上的 webkit）中存在的问题是，如果它们“离屏”，则不渲染相对和绝对元素。当它们在屏幕上滚动时，这可能会导致延迟。

您可以应用一些“hack”垫片：

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

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

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

给你一些阅读：

还有一个我从某处复制到笔记中的片段，现在找不到来源：

尤其是在严重依赖滚动的网站上，您可能会发现您的主要内容依赖于溢出：滚动。这是一个真正的挑战，因为这种滚动不会以任何方式进行 GPU 加速，因此每当用户滚动时都会重新绘制内容。您可以使用正常的页面滚动（溢出：可见）和位置：固定来解决此类问题。

于 2013-03-06T17:01:10.183 回答
2

我认为您有两个要解决的问题。滑到下面的文字和滞后的滚动速度？

我不确定你想用版权符号做什么，但我不会有一个line-height小于1或1em。尝试使用父元素并设置跨度的样式。您可能可以display:inline-block; vertical-align: middle;在跨度上使用以获得所需的效果。

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

滚动它取决于你在做什么。移动浏览器等待300ms标签<a>来查看您是否在滚动或单击链接。可能与此有关。如果是这样，我会结帐Google FastClick。

移动浏览器加速了 body 上的页面滚动。因此，使用嵌套的 div 或position:absolute可能会阻止您获得更快的滚动速度。在较新的版本中Android，iOS您可以使用 -webkit-overflow-scrolling: touch 来提供帮助，但这对旧手机没有任何作用。我会尽量不使用绝对位置，因为根据您的示例，它看起来不像是必需的，而且使用滚动的嵌套 div 需要一些用户在 div 内使用两个手指来滚动内容。我也会尽量避免这种情况，并用更适合移动设备的设计模式替换设计，比如向下扩展内容的链接。

许多滚动问题在尝试支持position:fixed移动设备时暴露出来，如果您认为这可能导致它并且您想阅读它：http ://bradfrostweb.com/blog/mobile/fixed-position/

于 2013-03-04T06:18:38.023 回答
1

删除position:absoluteand position:relative，此布局绝对不需要它们，它们会导致您的所有问题。

margin-top如果你愿意，你可以在你的身体里添加一些。

PhoneGap会产生一些这样的 html 垃圾，我希望你对 CSS 有很好的控制。

于 2013-03-04T15:42:20.057 回答
0

实际上有一个简单的 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-07T08:08:42.550 回答