13

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

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • 1
    Does this answer your question? [CSS3 100vh not constant in mobile browser](https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser) – Grzegorz T. Jan 03 '22 at 23:30
  • @GrzegorzT. no, it doesn't answer my question. I have this only on Safari, it works fine on Android, also it happens when a virtual keyboard is opened, not when address bar is hidden. – jcubic Jan 04 '22 at 08:38
  • Did you ever figure this out? – JJT Feb 07 '22 at 07:03
  • @JJT no, I think that will start a bounty maybe someone will reply. – jcubic Feb 07 '22 at 21:58
  • I found a solution using `react-div-100vh` for react – JJT Feb 07 '22 at 22:07
  • @JJT this has nothing to do with React, that is just JavaScript library. The real solution if you found it is in CSS. – jcubic Feb 07 '22 at 22:36
  • I think this is just normal Ios behavior, looked at popular sites and didn't find any which I couldn't "overscroll" outside content. But thought about it aswell before and a hack would be great – Furious Mountain Feb 09 '22 at 13:10
  • 1
    I think that this is a long-lasting issue and Apple doesn't care how miserable users and developers are. [Safari on iOS scrolls beyond element when virtual keyboard is opened](https://stackoverflow.com/q/52857694/387194) – jcubic Feb 12 '22 at 20:40
  • Have you filed or upvoted on the bug at Safari/webkit? I don't think this is fixable unless you had Javascript scroll detection that if the top of the #term was out of view then to add some `#term:focus` CSS values that incrementally pushed this div down 3rem each time the user scrolled and then when then the user got to within a certain distance of the top of #term when scrolling upwards this CSS is removed. Not worth the effort IMHO. You should post the webkit bug status on here and we can all upvote. – pjk_ok Feb 13 '22 at 16:59
  • 2
    @TheChewy it is an issue that has been on for ages. But I have no idea how to report it since I was told on Twitter that it's only for Safari and other WebKit-based browsers work fine. I've sent a tweet to Jen Simmons, but I don't know if they saw my reply it was tweeted few days after I've repled (found a link in the newsletter that didn't read immediately) https://twitter.com/jensimmons/status/1491064075987873792 – jcubic Feb 14 '22 at 11:53

2 Answers2

0

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

mikenlanggio
  • 1,122
  • 1
  • 7
  • 27
  • It doesn't work. It's even worse. Because the page jumps https://terminal.jcubic.pl/mobile_fix.html I don't think that this can be fixed that easily. – jcubic Feb 15 '22 at 15:33
-2

Have you tried:

body {
margin: 0 auto;
}
Jon
  • 622
  • 8
  • 29