0

我<ul>在此页面上有一个动态创建的列表：http ://www.roadtripradar.com

（要查看列表，您需要输入路线，添加一些选项，然后单击“搜索”；创建的列表在地图下方的“所有地点”按钮下）

我遇到的问题是<ul>，一旦你开始滚动，就会覆盖页面上的所有其他内容......但仅限于 Android 版 Chrome。

它在桌面上的 IE、FF 和 Chrome 中完美运行。它在 iPhone 上的 Safari 中完美运行。

我已经尝试改变z-values，它没有任何区别。

我的列表中的 CSS 是：

#list {
        overflow: auto;
        border: 1px solid white;
        border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border: 3px 3px 3px 3px;
    height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 120px);
    height: calc(100% - 100px);
        width: 90wh;
        padding: 1px 1px 1px 1px;
        background-color: rgba(136, 169, 255, 0.5);
        display:block;
      }

谁能想到是什么导致了这种奇怪的行为？

如果您能提供建议，我将不胜感激。谢谢你。

4

1 回答 1

0

好的，事实证明这是 Android 版 Chrome 中的一个已知错误（与 3d 渲染有关，这对我来说大多是陌生的，但幸运的是，世界上还有其他人比我更聪明！）。结果是完全-webkit-transform: translateZ(0);解决#list了问题，如下所示：

#list {
        -webkit-transform: translateZ(0);
        overflow: auto;
        ...
        ...
      }

就是这样 - 问题解决了！

如果有人能够解释为什么会这样，请随时发表评论。

于 2015-05-21T11:04:35.273 回答