溢出-x：隐藏;不工作在Android设备上 [英] Overflow-x: hidden; not working on android devices

问题描述

我得出的结论是，这是一个仅限于Android的问题，是由我的导航菜单工作原因造成的，并且正在耗尽尝试的想法。菜单从左侧100％推入以隐藏菜单。然后，我使用css转换将菜单从右侧滑出到窗口的80％。一旦菜单被切换，它将在菜单隐藏的右侧留下一个开放的空白空间。我无法使用display：none;因为它会杀死动画。重要问题只发生在菜单切换后。

我曾尝试过：

• SO Q1




• SO Q2




• SO Q3




• SO Q4




• body，html，wrapper， .searchCont等等。





以下是导航菜单css：



  ul.subNav {
位置：绝对; 
 top：70px;剩余
：100％; 
过渡：全部0.6s缓解; 
 -webkit-transition：全部0.6s易用性; 
 -moz-transition：全部0.6s缓解; 
 -ms-transition：全部0.6s易用; 
可见性：隐藏; 
宽度：80％; 
背景：＃f7f7f7; 
 border-left：5px solid＃00529f; 
 z-index：100; 
} 
  

结束更新 $ b

这是css：



  .wrapper {
最大宽度：100％ ; 
身高：100％; 
背景：＃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（线性，左上，右下，停止颜色（0％，＃20aad7），停止颜色（31％ ，＃54709f），色彩停止（65％，＃64b491），色彩停止（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），线性渐变（135deg，＃20aad7 0％，＃54709f 31％，＃64b491 65％，＃047074 100％）; 
 background-repeat：repeat; 
 overflow-x：hidden; 
} 
  

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





---





以下是问题的图像：





<解决方案同样的问题，在html和body中应用overflow-x：hidden并没有在Android中做任何事情。把一个容器div放在你的身体里，并把所有东西都包裹在页面上。将overflow-x：hidden添加到该容器div并解决问题。


I have come to the conclusion that this is an android only problem, being caused by how my navigation menu works, and am running out of ideas to try. The menu is pushed 100% from the left to hide the menu. I am then using css transitions to have the menu slide out from the right side to 80% of the window. Once the menu is toggled it is leaving an open and empty space to the right side where the menu is hiding. I can't use display: none; since it will kill the animation. Important The problem only happens once the menu is toggled.

I have tried:

• SO Q1

• SO Q2

• SO Q3

• SO Q4

• overflow on the body, html, wrapper, .searchCont, and more.

Update 2/6/2014

Here is the navigation menu 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;
}

End update

Here is the 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;
}

Finally, here is a fiddle/live site: Demo-fiddle/Demo-live-site

---

Here is an image of what the problem looks like:

解决方案

Ran into the same problem, applying an overflow-x: hidden to the html and body didn't do anything in Android. Put a container div inside your body and have that wrap everything on the page. Add an overflow-x: hidden to that container div and the problem is solved.

这篇关于溢出-x：隐藏;不工作在Android设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！