2

With a very simple html document below, why is there a large blank space at the bottom when viewed in Chrome on iOS? Here is a demo page: https://watchfulfirebrickopengl.ksb1986.repl.co/

I've tried using 100% instead of 100vh but get the same results. This doesn't happen in Safari or Chrome on desktop or Safari on iOS. What is causing this and how can it be avoided?

(A little history: Some time in 2021 I noticed this start to show up at the bottom of many websites (including some of mine). I figured it may have been a bug that would soon disappear with the next version update. Here we are in 2022 and it still persists..)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            html,
            body {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
            main {
                background: lightblue;
                height: 100vh;
            }
        </style>
    </head>

    <body>
        <main>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
        </main>
    </body>
</html>
ksb1986
  • 29
  • 7
  • 2
    any progress on this? The exactly same thing occurs to me as well. Looks like a critical bug in iOS Chrome... which remains not fixed for more than several years. Another phenomenon of this bug is that some css animations(like in carousel) get choppy. It is so tiring. – user3033077 Sep 15 '22 at 19:57

2 Answers2

0

My guess is margins on the <main> tag, could you try using the following instead?

            html,
            body,
            main {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
            main {
                background: lightblue;
            }

Or, try using absolute positioning:

            html,
            body,
            main {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
Anna Azzam
  • 252
  • 2
  • 7
  • Dang, this didn't seem to make a difference. The page still has a large blank space at the bottom. – ksb1986 Jan 31 '22 at 21:23
0

You should try removing the height property from main element and change the vh to percentage in the body selector of css, and the code looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            main {
                background: lightblue;
           
            }
        </style>
    </head>

    <body>
        <main>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
            <div>Page content</div>
        </main>
    </body>
</html>
Vibhor Goyal
  • 110
  • 10
  • Dang, this didn't seem to make a difference. The page still has a large blank space at the bottom. – ksb1986 Jan 31 '22 at 21:23