Android浏览器上CSS overflow和绝对定位问题

Question

我们有一个基于JQuery Mobile、PhoneGap和ASP.net MVC构建的移动Web应用程序。该应用程序旨在无论浏览器如何都能在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 - Asus Transformer Tab。

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

目前不能删除绝对定位，因为这将导致布局的完全重新设计，而我们只剩下几天时间发布。那么有人可以提供一个快速解决方案吗？

- user2630115

---

我也遇到了同样的问题。有解决的办法吗？ - andr111

Answer 1

请使用overflow-x和/或overflow-y属性代替。

例如：

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

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

- Moob

---

在使用Android 4.1.2 SDK (Galaxy Note) 运行 Cordova 5.4.1 应用程序 (cordova-android v4.1.1) 后，对我有效。子容器仍然有点卡顿，但感谢这个解决方案！ - jojo

Answer 2

overflow：auto的问题在Android浏览器中是/曾经是一个已知的问题。 有一篇关于此问题的报告(请参见此处)，发表于2009年。我认为他们在此期间已经解决了这个问题。但人们仍然抱怨它不起作用。如果是这样，我怀疑他们将不再修复它，因为Chrome现在已成为标准的Android浏览器。

- smyk

Answer 3

我不知道为什么它能起作用，但是在你的样式中添加-webkit-backface-visibility: hidden;可以解决它。

- mistersender

---

添加-webkit-backface-visibility: hidden;对我没有起作用 =/... 有人知道如何解决这个问题吗？我也不能改变父容器的position:absolute。 - Jonatas Gusmão

Answer 4

尝试将绝对定位的容器内的元素放入新的div中，并相对定位它，怎么样？

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

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

- user3725652

Answer 5

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

- josemmo