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.

Solution 1

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.

Solution 2

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

Solution 3

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.

Comments

[Admin]

removed wrapper's 100% height in the screen and antiscreen css - no change.

[superjaz1]

I just tried on my iPhone. Remove the min-height:100%; height:100%; also from html and body, try that?

[Admin]

Thanks! adding and removing to find the culprit!

[Pim Schaaf]

Different site, similar problem. Found that removing height: 100% on html, body fixes smooth scrolling on iPhone 3, also fixed scrolling on an Android device (Samsung). Did not have 100% height on wrapper. Thanks!