White space outside html on mobile Safari when keyboard is open - McMap

About

White space outside html on mobile Safari when keyboard is open

Asked 3/1, 2022 at 22:41 Answered 14/2, 2022 at 4:10

css mobile-safari browserstack

T

2

16

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.

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

Thundercloud answered 3/1, 2022 at 22:41 Comment(14)

Does this answer your question? CSS3 100vh not constant in mobile browser – Paraprofessional 3/1, 2022 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. – Thundercloud 4/1, 2022 at 8:38

Did you ever figure this out? – Mcalister 7/2, 2022 at 7:3

@Mcalister no, I think that will start a bounty maybe someone will reply. – Thundercloud 7/2, 2022 at 21:58

I found a solution using react-div-100vh for react – Mcalister 7/2, 2022 at 22:7

@Mcalister this has nothing to do with React, that is just JavaScript library. The real solution if you found it is in CSS. – Thundercloud 7/2, 2022 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 – Monteiro 9/2, 2022 at 13:10

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 <html> element when virtual keyboard is opened – Thundercloud 12/2, 2022 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. – Coati 13/2, 2022 at 16:59

@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) twitter.com/jensimmons/status/1491064075987873792 – Thundercloud 14/2, 2022 at 11:53

seems this is a long-standing Safari bug: #43997035 – Severen 14/9, 2023 at 13:41

@Severen thanks there are some interesting and promising answers. – Thundercloud 14/9, 2023 at 23:21

Anyone ever find a solution to this?? Insane this has been an issue for years... – Latricialatrina 2/2 at 0:25

@NateBabbel this is a bug in Safari and Apple developers need to fix this. But they don't have time because they need to implement every new feature from different specs that no one needs. – Thundercloud 2/2 at 15:33

L

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

Lynettelynn answered 14/2, 2022 at 4:10 Comment(1)

It doesn't work. It's even worse. Because the page jumps terminal.jcubic.pl/mobile_fix.html I don't think that this can be fixed that easily. – Thundercloud 15/2, 2022 at 15:33

S

-2

Have you tried:

body {
margin: 0 auto;
}

Shoring answered 12/2, 2022 at 16:11 Comment(2)

But you know that "auto", when there is a default width of 100%, will make no difference than with margin: 0. – Thundercloud 12/2, 2022 at 20:31

It doesn't work. I've checked. – Thundercloud 12/2, 2022 at 20:33

Recommended topics

#Godot #Unity #Godot 4.X #Mongodb

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

© 2022 - 2024 — McMap. All rights reserved.