Blank space appearing at bottom of all webpages in Google Chrome on iOS

Viewed 1470

I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.

All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.

Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.

I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.

After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally. Solution: Load chrome://flags and set Smooth Scrolling to disable.

Seems odd that this would be necessary. Anyone know what's going on?

3 Answers

This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).

6 hours gone, but it's a relieve to know it's nothing got to do with my codes.

iPhone with chrome is fine on my end

iPad Chrome

To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.

So if we apply this to the body,

body {
    overflow: hidden !important;
}

this should work in your scenario!

Please make sure you have added this meta tag and the same attributes

<meta name="viewport" content="width=device-width,initial-scale=1.0">

And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.

Related