iOS Safari 粘性输入底部不需要的空白

Question

所以我在页面底部有一个输入，位置如下:

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;

当我在 iOS Safai 上打开键盘时，输入下方有不需要的空白。您可以从它向上滚动，但它不应该在那里。

突出显示来自 Safari Dev 控制台，我已经突出显示了 HTML，所以我认为额外的空格不是由我的 HTML/CSS 引起的...

Android 上不会发生这种情况。

有什么帮助吗？

Answer 1

当输入有焦点时，iOS safari 不遵守 position: fixed。似乎正在发生的是元素的位置属性更改为 static。

围绕这一点还有一些距离，但目前最终的最佳答案是不使用 fixed。

补充阅读:https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29