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

问题描述

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

So I have an input at the bottom of my page, positioned like so:

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

当我在iOS Safai上打开键盘时，输入下方没有多余的空格.您可以从中向上滚动，但它不应该在那里.

When I open the keyboard on iOS Safai, there is unwanted whitespace below the input. You can scroll up from it but it shouldn't be there.

突出显示来自Safari Dev控制台，我突出显示了HTML，所以多余的空格不是我想的HTML/CSS引起的...

The highlighting is from Safari Dev console, I've highlighted HTML, so the extra whitespace is not being caused by my HTML/CSS I think...

这在Android上不会发生.

This does not happen on Android.

有帮助吗?

推荐答案

当输入具有焦点时，iOS safari不尊重position: fixed.似乎正在发生的是该元素的position属性更改为static.

iOS safari does not respect position: fixed when the input has focus. What seems to be happening is that the element's position attribute is changed to static.

有一些解决办法，但是目前最终的最佳答案是不使用fixed.

There are a couple aways around this, but the ultimate best answer for now would be to not use fixed.

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

这篇关于iOS Safari粘性输入在底部不需要的空白处的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！