jquery - 虚拟键盘中断位置 :fixed elements in 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 并查看浏览器看到的内容。

从下面的截图可以看出，当我打开虚拟键盘时，评论停靠面板会向上移动，这是意料之中的。但是我不能像我应该的那样与它交互(例如，我不能再次点击文本区域或 RESPOND 或 CANCEL 按钮)，所以我使用 Inspect Element 来突出显示停靠栏，看起来定位没有匹配。显示虚拟键盘后，浏览器看不到固定停靠栏实际上已经向上移动，这在我在检查器中选择面板时显而易见。

显示键盘之前的面板定位(忽略突出显示的文本句柄 - 那些位于固定停靠面板下方):

显示键盘后的面板定位:

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

这也发生在我拥有的其他 position:fixed 元素上，例如覆盖整个页面的登录表单。

Answer 1

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

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