Question

我们有一个使用JQuery Mobile，PhoneGap和ASP.net MVC构建的移动网络应用程序。该应用程序的目标是在iOS和Android设备上运行，无论浏览器如何。我们已经在下面列出的设备上测试了应用程序，它似乎没有任何问题地正常工作

iOS 5 - iPad，iPhone。

Android 4.1.2 - Google Nexus 7，三星Galaxy S3，三星Galaxy Note 2，三星Galaxy Tab 2.

Android 4.0.3 - 华硕Transformer标签

但是当使用4.1.2在三星Galaxy Note 800 的 Android Stock浏览器上进行测试时，我们遇到了一个非常奇怪的问题。放置在具有css属性“溢出：自动”的div（比如子div）中的元素在启用滚动时不响应任何触摸事件。这里要注意的主要问题是包含这个div的Parent div绝对位于“ position：abolute ”。通过互联网研究了一段时间后，我们发现绝对位置和溢出属性的组合可能会在Android浏览器上引起一些问题。

目前无法移除绝对位置，因为它导致布局的完全重新设计，我们只剩下几天的发布时间。那么任何人都建议快速解决这个问题吗？

Answer 1

改为使用overflow-x和/或overflow-y属性。

EG

overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */

此外，由于滚动条隐藏在触控设备上，因此您可以使用:scroll而不是:auto。它看起来会一样，但可能不会受到相同的错误。

Answer 2

我不知道它为什么有效，但添加-webkit-backface-visibility：hidden;你的风格会解决它

Answer 3

问题overflow: auto是Android浏览器中的已知问题。 2009年有一个问题报告(see here)。我以为他们在此期间解决了这个问题。它已经过时了。但人们仍抱怨它不起作用。如果是这样，我怀疑他们将不再修复它，因为Chrome现在已成为标准的Android浏览器。

Answer 4

您可以使用名为“iScroll”的javascript库。它适用于大多数Android设备，并不难实现。只需在div元素下面写var scrollDiv = new iScroll('divId');即可。这是项目页面：http://cubiq.org/iscroll-4

Answer 5

如何尝试将元素放在一个新div中的绝对定位容器中并相对定位？

<div class="absolutelyPositionedParent">
    <div class="relativelyPositionedElement"></div>
</div>

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>

Android浏览器上的CSS溢出和绝对定位问题

5 个答案: