在Safari中，当虚拟键盘打开时，position: sticky无法正常工作

Question

当虚拟键盘在Safari中打开时，固定定位（position sticky）不能正常工作。

我尝试使用了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. 点击文本输入框以聚焦

期望结果： 红色页脚应该粘附在屏幕底部，即使虚拟键盘弹出也是如此。 实际结果： 用户必须在键盘打开的情况下向下滚动才能看到红色页脚。

- user3038754

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()确保转换在下一次渲染之前发生。

- Yuxiang Yang

Answer 2

这是Safari自2019年10月以来的预期行为：

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

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

- user3038754