键盘打开时，移动 Safari 上 html 外的空白答案

【问题标题】：White space outside html on mobile Safari when keyboard is open键盘打开时，移动 Safari 上 html 外的空白
【发布时间】：2022-02-14 12:10:11
【问题描述】：

我在移动 Safari 上的 JavaScript 库中有一个非常奇怪的错误，我尝试通过一个简单的示例重现该错误：

我有基本的 css 和 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>
    ...

当我在移动 Safari 上打开网站并打开虚拟键盘时，我可以向下滚动到内容之外。

这是当我将鼠标悬停在 body 上时来自 BrowserStack 的屏幕截图，我无法将鼠标悬停在 html 上以突出显示它。

有人知道如何解决这个问题吗？它看起来像一个基本页面。

这里是网站的链接：https://terminal.jcubic.pl/mobile.html

从代码中可以看出，我尝试通过添加以下内容来解决此问题：

-webkit-fill-available

在一篇文章中找到：CSS fix for 100vh in mobile WebKit 由 Chris Coyier 撰写。但它没有任何改变。

有没有办法摆脱那个空白，似乎连 CodePen 都有这个问题。它是 Mobile Safari 中的一个错误，是否有修复它的方法？

编辑：

我认为这是一个长期存在的问题，Apple 并不关心用户和开发者的痛苦程度。 Safari on iOS scrolls beyond element when virtual keyboard is opened

【问题讨论】：

这能回答你的问题吗？ CSS3 100vh not constant in mobile browser
@GrzegorzT。不，它没有回答我的问题。我只有在 Safari 上才有这个，它在 Android 上运行良好，当打开虚拟键盘时也会发生这种情况，而不是在隐藏地址栏时发生。
你有没有想过这个问题？
@JJT 不，我认为这将开始赏金也许有人会回复。
@TheChewy 这是一个存在多年的问题。但我不知道如何报告它，因为我在 Twitter 上被告知它只适用于 Safari，其他基于 WebKit 的浏览器可以正常工作。我已经向 Jen Simmons 发送了一条推文，但我不知道他们是否看到我的回复，这是在我回复几天后发布的（在新闻通讯中找到了一个没有立即阅读的链接）twitter.com/jensimmons/status/1491064075987873792跨度>

标签： css mobile-safari browserstack

【解决方案1】：

你试过了吗：

body {
margin: 0 auto;
}

【讨论】：

但是你知道，当默认宽度为 100% 时，“auto”与 margin: 0 没有区别。
它不起作用。我查过了。

【解决方案2】：

试试这个：

JS 文件：

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

CSS 文件：

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

可能会有帮助

【讨论】：

它不起作用。情况更糟。因为页面跳转terminal.jcubic.pl/mobile_fix.html我不认为这可以很容易地解决。