位置：在 Safari 中打开虚拟键盘时，粘性不起作用

Question

在 Safari 中打开虚拟键盘时，位置粘性不起作用

我尝试过使用position: -webkit-sticky.

非 Safari webkit 浏览器（Chrome、Firefox、Opera）中的预期行为

.sticky {
  background-color: red;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

重现步骤：

1. 在 iOS 上的 Safari 中打开https://codepen.io/wmsmacdonald/pen/vYBVVRL
2. 滚动以将白屏带入视口
3. 单击文本输入以聚焦

预期：即使虚拟键盘打开，红色页脚也应粘在屏幕底部实际：用户必须在键盘打开的情况下向下滚动才能看到红色页脚

Answer 1

let pendingUpdate = false;
const viewportHandler = (event) => {
    if (pendingUpdate) {
        return;
    }
    pendingUpdate = true;

    requestAnimationFrame(() => {
        pendingUpdate = false;
        const layoutViewport = document.querySelector('.sticky');
        layoutViewport.style.transform = "none";
        if (layoutViewport.getBoundingClientRect().top < 0) {
            layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
        }
    });
};
window.visualViewport.addEventListener("scroll", viewportHandler);
window.visualViewport.addEventListener("resize", viewportHandler);

该pendingUpdate标志用于防止 onresize 和 onscroll 同时触发时可能发生的多次调用 transfrom。使用requestAnimationFrame()可确保变换在下一次渲染之前发生。

Answer 2

这是截至 2019 年 10 月 Safari 中的预期行为：

https://bugs.webkit.org/show_bug.cgi?id=202120

使其与其他渲染引擎保持一致的解决方法是使用Visual Viewport API获取视觉视口高度并使用position:absolute 将元素固定到底部。但是，Visual Viewport API 仅在 Safari 13 中受支持。