Mobile site - doesn't scroll at all

Question

I've googled everywhere - my site has no fixed heights, no fixed placements. It shows the viewport as I'd like, but ONLY that. It doesn't scroll or show anything else.

What am I missing? I've tried all sort of overflow options, nothing seems to be working.

Answer 1

I was loading a YouTube video on my site using an iframe loaded by JavaScript slider. This caused a problem with Android which did not allow scrolling and zooming of the page. It had nothing to do with setting CSS "html, body" heights or overflow hiddens. Once I got rid of my YouTube video inside the jQuery slider plugin, website scrolling and zooming started working just fine on the Android phone.

Answer 2

Trying removing the last javascripts added on your html!I found that my site doesn't scroll on mobiles because a javascript. Best regards,

Answer 3

I would do the following...

1. I would first temporarily disable/remove the stylesheets to make sure everything is spiffy as plain html (if you still have an issue without the stylsheets, there is probably a js script wrecking chaos)
2. I would search for position absolute(specifically on a wrapper,content, or sidebar element) in the stylesheet. This is often the #1 killer for scrollability on iOS/mobile phone devices.

Answer 4

BODY and HTML tags are 100% in height and so is your .wrapper

html, body {min-height:100%; height:100%; overflow-x:hidden; display:block;}

Try removing the height from .wrapper

.wrapper {
    position:relative;
    width:80%;
    margin:0 auto;
}

If you experience content overflowing, add overflow: hidden to .wrapper