虚拟键盘中断位置：iOS中的固定元素

Question

在 iOS 11 中的 iPhone 6 Plus 上使用 Safari 和 Chrome 进行了测试。我有一个带有以下 HTML 结构和 CSS 的评论停靠面板：

HTML：

<div class="highlighter-docked-panel shown">
    <div class="highlighter-docked-header">Add Comment</div>
    <div class="highlighter-comments-user">...user inner html...</div>
    <div class="highlighter-comment">
        <div id="respond" class="comment-respond">...comment form html...</div>
    </div>
    <div class="btn-confirm confirm-no">Cancel</div>
</div>

CSS：

.highlighter-docked-panel {
    right: -100%;
    opacity: 0;
    bottom: 85px;
    z-index: 999999;
    position: fixed;
    width: 300px;
}
.highlighter-docked-panel.shown {
    right: 0;
    opacity: 1;
}

面板是 body 标记的直接子级，不嵌套在任何其他 html 元素中。我正在使用 Web Inspector 在我的 iPhone 连接的桌面上从 Safari 进行调试，这样我就可以检查 DOM 并查看浏览器看到的内容。

从下面的截图可以看出，当我打开虚拟键盘时，评论停靠面板向上移动，这是意料之中的。但是我不能像我应该能够的那样与它进行交互（例如，我不能再次单击文本区域或响应或取消按钮），所以我使用检查元素突出显示了停靠栏，并且看起来定位不不相配。显示虚拟键盘后，浏览器看不到固定底座实际上向上移动了，当我在检查器中选择面板时很明显。

显示键盘之前的面板定位（忽略高亮文本句柄 - 位于固定停靠面板下方）：

显示键盘后的面板定位：

为什么浏览器在视觉上显示面板的位置与它实际认为的位置不同？有没有办法在显示键盘后“刷新”固定面板？

这也发生在其他位置：固定元素上，例如覆盖整个页面的登录表单。

Answer 1

这是预期的行为。打开键盘时，它不会覆盖浏览器的视口。它缩小了视口以为键盘腾出空间。您的 cmets 面板仍然位于距离新缩小的视口底部 85 像素处。您可能想尝试将评论面板放在文本所在的容器中。然后将该容器设为position: relative 和荧光笔停靠面板position: absolute。如果我正确理解你的问题，那应该就是你想要的样子。

编辑：尽管在这种情况下，用户将无法看到他们正在输入的内容。