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

【问题标题】：position: sticky doesn't work when virtual keyboard is open in Safari位置：在 Safari 中打开虚拟键盘时，粘滞不起作用
【发布时间】：2020-02-02 04:24:12
【问题描述】：

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

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

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

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

重现步骤：

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

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

【问题讨论】：

标签： css safari

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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 同时触发时多次调用转换。使用requestAnimationFrame() 可确保转换发生在下一次渲染之前。

【讨论】：