虚拟键盘中断位置：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在桌面上的Safari中连接我的iPhone进行调试，以便我可以检查DOM并查看浏览器看到的内容。

从下面的屏幕截图中可以看出，当我打开虚拟键盘时，注释停靠栏面板向上移动，这是预期的。但是我不能像我应该那样与它交互（例如我无法再次点击textarea或RESPOND或CANCEL按钮），所以我使用Inspect Element突出显示了底座，看起来定位没有不配。显示虚拟键盘时，浏览器看不到固定底座实际上已向上移动，这在检查器中选择面板时很明显。

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

显示键盘后的面板定位：

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

这也适用于其他位置：我所拥有的固定元素，例如覆盖整个页面的登录表单。

Answer 1

这是预期的行为。当键盘打开时，它不会覆盖浏览器的视图端口。它缩小了视口，为键盘腾出空间。您的评论面板仍然位于距离新缩小的视图端口底部85px处。您可能希望尝试将注释面板放在文本所在的容器中。然后创建容器position: relative和突出显示器停靠面板position: absolute。如果我理解你的问题，那应该是你想要的样子。

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