14

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:

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:

problem with overflow

Community
  • 1
  • 1
Josh Powell
  • 6,219
  • 5
  • 31
  • 59
  • I've played width your page with iOS7. I don't see an issue with overflow right away. What can I do to reproduce the problem? – Nico O Feb 04 '14 at 17:34
  • The problem happens once you toggle the navigation or search button. I have only tested on my driod but once I'm at home I can test it on my old iphone. – Josh Powell Feb 04 '14 at 17:48
  • Looks fine for me under ios so far. I can not provide help for android atm. I'll upvote your question. – Nico O Feb 04 '14 at 17:53
  • @NicoO I have added an image to show how it looks. I have checked on chrome, firefox, and samsung browser which all display it the same, it could be an android only problem. – Josh Powell Feb 04 '14 at 18:46
  • Clicked, pinshed, dragged and used every slide toggle option. Works solid with ios. You should really Focus at the android browser for research – Nico O Feb 04 '14 at 18:53
  • @NicoO Thank you mate, I'm hoping I can figure it out since it is a real pain while scrolling. – Josh Powell Feb 04 '14 at 21:22

8 Answers8

4

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.

picitelli
  • 155
  • 1
  • 7
3

You need 

#wrapper {position:absolute;}
Carol McKay
  • 2,438
  • 1
  • 15
  • 15
  • This seems to work with the search bar but does not work with the navigation menu. Once the nav is toggled the right side of the page becomes scrollable. I also used relative instead of absolute, tried both, since the wrapper can not be absolutely positioned. – Josh Powell Feb 06 '14 at 14:24
3

We have been struggling with the same issue with my friend (as it turns out, @user3310612 :)) at work for the last couple of days. Absolutelly couldn't understand why EVERY way of moving the menu right (especially transform, which should not affect layout) made the page scrollable right on Android.

Today after seeing the posts that overflow-x doesn't work on Android, I just randomly asked "What happens if you use just overflow:hidden. Expectations — right menu clipped, but probably also cripled page and broken up/down scrolling. Reality — works flawlessly.

So, for us, overflow:hidden on the topmost #container solved the issue. 20 minutes ago :)

ikari
  • 331
  • 2
  • 8
  • Are you using `height: 100%;` on that container at all? – Josh Powell Feb 14 '14 at 14:38
  • No, and maybe because of this on the desktop the demo menus are too short (shorter than the window) if the page is not long enough (this doesn't affect mobile). I was thinking about adding a trick like `min-height: 100%` or `min-height: 100vh` somewhere. – ikari Feb 14 '14 at 14:40
  • I could give it a try but I just ended up redoing how the setup is since my work is rushing this. I also am pretty sure when I tried `overflow: hidden;` it broke the layout but at least I have old files to test on! – Josh Powell Feb 14 '14 at 14:43
  • Oh, worth mentioning ­- we have a double wrapping with `#container` and `#inner-container`, I think it was because of offCanvas-menu support. You can check out our version at https://bitbucket.org/ikari_pl/menuheader/ – ikari Feb 14 '14 at 14:44
  • PS. The live example doesn't show me any kind of right menu and doesn't reproduce the problem, unfortunately. Opening JSFiddle on a smartphone doesn't show this problem as well, but maybe it's because the preview panel is an iFrame... – ikari Feb 14 '14 at 14:48
  • Yeah my backened team finally developed some fucntions for it, here is a temporary password, feb2014. For the comment above, I have a wrapper and then mainCont inside of the wrapper which holds everything. – Josh Powell Feb 14 '14 at 14:59
  • Still, the menu is on the left, and that never posed an issue :). Did you check out the demo.html of our project? Before you click the button, the solution is pure CSS and recreated the problem (before we changed `overflow-x` to just `overflow`). Somehow, enabling the JS version (for off-canvas menu) was fixing the issue as well. – ikari Feb 14 '14 at 15:54
2

I found one option that works for now. (Will leave unmarked for better answers)

I ended up making the menu and nav icon position: fixed; since I wanted the menu to be fixed in the same spot if the user scrolls the page to prevent an awkward looking menu.

This fixed my problem only due to position: fixed; since it takes the entire element out of the workflow as if it was not there. Then the body is not perceiving an element to be there so you can no longer scroll to the right side.

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;
}
Josh Powell
  • 6,219
  • 5
  • 31
  • 59
  • +1 I was trying to add a slide out menu and setting position fixed was the only method that worked to prevent side scrolling over to the menu. Thanks! – developering Sep 25 '14 at 21:17
0

I guess your "problem" comes from visibility: hidden/ visible.

As the spec says:"hidden - The generated box is invisible (fully transparent, nothing is drawn), but still affects layout."

Try using 

display: none|block;

instead.

Or you can avoid the whole thing if you push the menu off-screen to the left (instead of to the right).

BTW: The link to your live site isn't working and there are some errors in your HTML markup on the JSFiddle (e.g. the closing </span> tags) and also your CSS has room for optimization. ;-)

Netsurfer
  • 5,543
  • 2
  • 29
  • 34
  • Updated live link, went from html to asp and is now password protected. Pertaining your suggestion, I do know visibility is causing it but as I stated in my question, I can not use `display: none|block;` because it will kill the animation. When you use css to animate something you need to stay away from none|block or there will be no animation. Pertaining to the span tag, good catch! I didn't even notice that so thank you a bunch. :] – Josh Powell Feb 13 '14 at 17:26
  • @JoshPowell: OK, so why don't you animate the width (from 0 to 80%) of the menu, instead of the position? This way you wouldn't need to push it off the screen. Or as proposed before, push it to the left, which btw is more like native apps behave. – Netsurfer Feb 13 '14 at 17:39
  • Animating the width is a rather good idea. For animating from the left side, I don't know if it is the best idea due to having the button on the right side is easiest to the user. Here is a SO question about that, http://ux.stackexchange.com/questions/45110/hamburger-menu-icons-should-they-be-on-the-left-or-right. I could just animate it from the left but that may look slightly odd, thanks for the ideas! – Josh Powell Feb 13 '14 at 18:41
  • Concerning the linked SO question: I would follow the answer of Majed. Most people I know, no one uses just one hand. All people hold the device with one hand and use the other one for operation. So my recommendation is: Put your image in the center, the search button to the right and the menu link to the left. Good luck! – Netsurfer Feb 13 '14 at 20:15
  • Thank you for all fo the help and what you suggested I already implemented! Here is the website link, http://bestbenefitsclub.com/BBCM/login.asp, and the temporary password, feb2014. If you don't mind, let me know what you think! Once again thanks for everything. – Josh Powell Feb 13 '14 at 20:24
  • Works so far and looks good. The bad news is, that the page scrolls to the right after first menu toggle (tested on my S4), but only in portrait. In landscape mode everything is OK. – Netsurfer Feb 13 '14 at 20:36
  • Very odd on my Note 3 I don't have that happen anymore in chrome and firefox. – Josh Powell Feb 13 '14 at 20:47
0

Try replacing

overflow-x: hidden;

with overflow: hidden;

I had the same problem and it worked for me.

user3310612
  • 1
  • `overflow: hidden;` does work for most cases but not by how my page is since I have the height set to 100% it will cap it after that which I can't have. – Josh Powell Feb 14 '14 at 15:04
0

I had the same problem and I kind of merged a few of the answers here together so thanks everyone for your input! Here's what I did:

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; 
}

Setting position:fixed; seemed to do the trick, so when I wanted the menu open (and in my case a fixed position was not desirable) I set it to absolute. You could also, as mentioned, toggle the visibility or even set display:none. This was only tested on Chrome for android.

Joao
  • 2,696
  • 2
  • 25
  • 35
0

I had the same problem on Android when working on an ionic project. What I did to solve the problem is put {overflow-x:hidden} on the child elements.

buczek
  • 2,011
  • 7
  • 29
  • 40
Jeff Liu
  • 1
  • 2