Question

我得出结论，这是一个仅限android的问题，是由我的导航菜单的工作方式引起的，并且我的想法已经用完了。菜单从左侧100％按下以隐藏菜单。然后我使用css过渡使菜单从右侧滑出到窗口的80％。切换菜单后，它会在菜单隐藏的右侧留下一个空旷的空白区域。我不能使用display：none;因为它会杀死动画。重要事项只有在切换菜单后才会出现问题。

我试过了：

SO Q1
SO Q2
SO Q3
SO Q4
在body，html，wrapper，.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;
}

最后，这是一个小提琴/实时网站：Demo-fiddle / Demo-live-site

以下是问题所在的图像：

problem with overflow

Answer 1

我的朋友（事实证明，@ user3310612 :)）在过去几天的工作中一直在努力解决同样的问题。绝对无法理解为什么每个移动菜单的方式（尤其是转换，不应该影响布局）使得页面可以在Android上滚动。

今天看到overflow-x在Android上无效的帖子后，我随机问“如果你只使用overflow:hidden会发生什么。期望 - 右侧菜单被剪切，但可能还有cripled page和向上/向下滚动。现实 - 完美无瑕地工作。

因此，对我们来说，最顶层overflow:hidden上的#container解决了这个问题。 20分钟前:)）

Answer 2

遇到同样的问题，将一个overflow-x：hidden应用于html和body在Android中没有做任何事情。将一个容器div放在你的身体内，然后将它包裹在页面上。将overflow-x：hidden添加到该容器div中，问题就解决了。

Answer 3

我找到了一个现在适用的选项。（将留下无标记以获得更好的答案）

我最终制作了菜单和导航图标position: fixed;，因为如果用户滚动页面以防止看起来很尴尬的菜单，我希望将菜单固定在同一位置。

这解决了我的问题仅归因于position: fixed;，因为它将整个元素从工作流中取出，就好像它不存在一样。然后身体没有感觉到一个元素在那里，所以你不能再滚动到右侧。

ul.subNav {
    position: fixed;
    top: 0;
    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%;
    height: 100%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

ul.subNav.active {
    left: 20%;
    visibility: visible;
}

Answer 4

你需要

#wrapper {position:absolute;}

Answer 5

我猜您的“问题”来自visibility: hidden/ visible。

正如the spec所说：“隐藏 - 生成的框是不可见的（完全透明，没有绘制任何内容），但仍会影响布局。”

尝试使用

display: none|block;

代替。

或者，如果您将菜单从屏幕上移到左侧（而不是右侧），则可以避免整个过程。

BTW：您的实时网站链接无效，JSFiddle上的HTML标记存在一些错误（例如结束</span>标记），您的CSS也有优化空间。 ; - ）

Answer 6

尝试替换

overflow-x: hidden;

overflow: hidden;

我遇到了同样的问题而且对我有用。

Answer 7

我遇到了同样的问题，我将这里的一些答案合并在一起，感谢大家的投入！这就是我的所作所为：

body{ 
    overflow-x:hidden; 
}
.menu{
    position: fixed;
    z-index: 1;
    width: 340px;
    max-width: 85%;
    top: 0px;
    right: -340px;
}
.menu.open{ 
    right:0; 
    position:absolute; 
}

设置position:fixed;似乎可以解决问题，所以当我希望菜单打开时（在我的情况下，fixed位置不合适）我将其设置为absolute。如上所述，您还可以切换visibility或甚至设置display:none。这仅在Chrome for Android上进行了测试。

Answer 8

在处理离子项目时，我在Android上遇到了同样的问题。我为解决问题所做的是将{overflow-x:hidden}放在子元素上。

溢出-x：隐藏;不在Android设备上工作

8 个答案: