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

【问题标题】：CSS overflow and absolute positioning issue on Android BrowserAndroid 浏览器上的 CSS 溢出和绝对定位问题
【发布时间】：2013-07-30 02:40:58
【问题描述】：

我们有一个使用 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 - Asus Transformer 选项卡

但是在 Samsung Galaxy Note 800 的 Android Stock 浏览器 4.1.2 上测试时，我们遇到了一个非常奇怪的问题。启用滚动时，放置在具有 css 属性“overflow:auto”的 div（例如子 div）中的元素不会响应任何触摸事件。这里要注意的主要是包含此 div 的 Parent div 绝对定位为'position:abolute'。在网上研究了一段时间后，我们发现绝对位置和溢出属性的组合可能会导致Android浏览器出现一些问题。

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

【问题讨论】：

我也有同样的问题。运气好解决了吗？

标签： android css cordova

【解决方案1】：

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

EG

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

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

【讨论】：

在使用 Android 4.1.2 SDK (Galaxy Note) 运行 Cordova 5.4.1 应用程序 (cordova-android v4.1.1) 后为我工作。儿童容器仍然有点滞后，但感谢这个工作！

【解决方案2】：

我不知道它为什么起作用，但是添加了 -webkit-backface-visibility: hidden;你的风格会解决它

【讨论】：

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

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：