当键盘打开时，移动 Safari 上 html 外部有空白
jcu*_*bic 15 css mobile-safari browserstack
我在移动 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
在一篇文章中找到： Chris Coyier 撰写的移动 WebKit 中 100vh 的 CSS 修复。但这并没有带来任何改变。
有没有办法摆脱那个空白，似乎连 CodePen 都有这个问题。这是 Mobile Safari 中的一个错误吗？有破解方法可以修复吗？
编辑：
我认为这是一个长期存在的问题，苹果并不关心用户和开发者有多痛苦。打开虚拟键盘时，iOS 上的 Safari 会滚动到元素之外
| 归档时间： |
|
| 查看次数： |
5865 次 |
| 最近记录： |