iOS Safari 在底部不需要的空白处粘滞输入

Posted 2023-02-23

【中文标题】iOS Safari 在底部不需要的空白处粘滞输入

【英文标题】：iOS Safari Sticky input at bottom unwanted white space

【发布时间】：2019-01-28 18:54:09

【问题描述】：

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

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

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

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

这在 android 上不会发生。

有什么帮助吗？

【问题讨论】：

对于没有固定位置的元素似乎也是如此。每当软件键盘打开时，Safari 都会在正文底部添加一个空格（甚至不是边距）。你找到解决办法了吗？

【参考方案1】：

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

这有几个办法，但目前最好的最终答案是不要使用fixed。

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