4

http://www.andrewsmorris.co.uk/blog/

I have a sidebar that slides out when you click the button on the left, the problem however, is that on iOS I get horizontal scroll bars on the page when I click it. Which I don't when I click it on a desktop browser, because it adds a class with overflow:hidden to the body class.

In theory this should prevent the same unwanted horizontal scrolling on the iPhone too, but it doesn't for reasons i cannot work out.

I could apply overflow-x:hidden to the html element, but that seems to jump the page to the top regardless of where you are, which is unwanted behaviour.

4
  • Hit the same quirk. Did you find a solution for this? Mar 22, 2013 at 0:00
  • I'm afraid not, no. If you're making a similar type of menu for mobile I'd recommend just having it position:fixed and have it slide over over the content. Hell, even facebook can't figure this quirk out, their mobile side has horizontal scrollbars when the menu is open.
    – andy
    Mar 22, 2013 at 10:18
  • Thanks, andy. Appreciate the reply. Mar 22, 2013 at 17:20
  • 1
    Do you have link for that page? Also Check Jquery Mobile slide to Menu. trying setting height and width to 100% (body and html) if you have scrolling content use -webkit-overflow-scrolling :touch are you using webkit transition to slide ? Aug 13, 2013 at 21:40

2 Answers 2

1

You need to apply overflow:hidden; and position:relative; to both and and they also can't be display:table, display:block works. Specifying the height and width may help as well.

1
  • It's a bit unclear where to add the position: relative/absolute. But after I added it, the flex-container was displayed properly and the overflow was working as expected. Would you please add an example? Mar 13 at 14:57
-1

I don't know a solution that will enable you to use overflow: hidden; based on the information you are giving. I can however advise you to use iScroll for mobile scrolling!

Take a look at it on cubiq's website

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.