位置：在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

从2019年10月开始，这是Safari中的预期行为：

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

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