White space outside html on mobile Safari when keyboard is open

user_387194 0
Viewed 1788

I have a very weird bug in my JavaScript library on mobile Safari, that I've tried to reproduce with a simple example:

I have basic css and html:

html, 
body {
    margin: 0;
    padding: 0;
    font-family: monospace;
}
body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
#term {
    background: black;
    color: #ccc;
    height: 100%;
}
h1 {
    margin: 0;
    font-weight: normal;
}

html:

    ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div id="term" contenteditable>
    <h1>HELLO Mobile</h1>
    ...

and when I open the website on mobile Safari and open the virtual keyboard, I can scroll down outside of the content.

Here is the screenshot from BrowserStack when I hover over body, I'm not able to hover over html to highlight it.

Mobile Safari

Does anybody know how to fix this issue? It looks like a basic page.

Here is the link to the website: https://terminal.jcubic.pl/mobile.html

As you can see from the code I've tried to fix the issue by adding:

-webkit-fill-available

Found in an article: CSS fix for 100vh in mobile WebKit by Chris Coyier. But it doesn't make any change.

Is there a way to get rid of that white space, it seems that even CodePen has this issue. Is it a bug in Mobile Safari, is there a hack to fix it?

EDIT:

I think that this is a long-standing issue and Apple doesn't care how miserable users and developers are. Safari on iOS scrolls beyond element when virtual keyboard is opened

browserstack mobile-safari css
2 Answers

Have you tried:

body {
margin: 0 auto;
}
user_121140750

Try this:

JS File:

const appHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

CSS File:

:root {
 --app-height: 100%;
}
html,
body {
 padding: 0;
 margin: 0;
 overflow: hidden;
 width: 100vw;
 height: 100vh;
 height: var(--app-height);
}

It may help

user_106495290
Related