ios下fixed元素失效

ios下fixed元素失效：

在使用bootstrap的navbar-fixed-top时，发现在iPhone上的微信里面，当点击input弹出输入法之后，顶部fixed的navbar消失，在输入法没有关闭的情况下，向上滚动，会发现navbar在半空中。

Google了一下，发现这个问题在iOS中很常见，Bootstrap也对此进行了说明。

Virtual keyboards

Also, note that if you’re using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn’t update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

不过我在最近刚更新的iOS8.3的Safari中，没有发现这个问题。在8.3的Safari中，点击input弹出输入法之后，fixed元素会失效，navbar回到最顶端，没有浮在半空中。猜测是在弹出虚拟键盘之后为了节省页面空间，而对fixed的元素进行了处理，但是在微信中的浏览器上处理出了点问题。

目前发现最好的解决方案是在点击input之后，直接把fixed的元素变成absolute的，不需要浏览器自己去做处理。

有人说在滚动时用timer实时调整元素位置，我觉得这个很低端。浏览器去处理fixed元素自然有它的道理，确实可以节省屏幕空间。我们其实也没有必要在这个情况下强制显示navbar，这时用户的重点在于输入。当我们input失去焦点之后，输入法关闭，这时我们再显示出navbar。

只要改成这样:position: absolute;

本文章由javascript技术分享原创和收集