android - 溢出-x : hidden; not working on android devices

Question

我得出的结论是，这是一个唯一的 android 问题，是由我的导航菜单的工作方式引起的，并且我已经没有办法尝试了。菜单从左侧推到 100% 以隐藏菜单。然后我使用 css transitions 让菜单从右侧滑出到窗口的 80%。切换菜单后，它会在隐藏菜单的右侧留下一个空旷的空间。我不能使用 display: none;因为它会杀死动画。重要问题只会在切换菜单后发生。

我试过:

• SO Q1

• SO Q2

• SO Q3

• SO Q4

• 在正文、html、包装器、.searchCont 等上溢出。

2014 年 2 月 6 日更新

这是导航菜单的CSS:

ul.subNav {
    position: absolute;
    top: 70px;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

结束更新

这是CSS:

.wrapper {
    max-width: 100%;
    height: 100%;
    background: #20aad7;
    background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
    background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), color-stop(100%,#047074));
    background: url("../images/bg.png"), -webkit-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -o-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -ms-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), linear-gradient(135deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background-repeat: repeat;
    overflow-x: hidden;
}

最后，这是一个 fiddle/live 站点:Demo-fiddle/Demo-live-site

---

这是问题的图片:

Answer 1

遇到同样的问题，应用 overflow-x: hidden 到 html 和 body 在 Android 中没有做任何事情。将一个容器 div 放入您的体内，并用它包裹页面上的所有内容。添加一个 overflow-x: hidden 到那个容器 div，问题就解决了。