微信小程序中input使用fixed定位之后光标异常的问题

提醒：本文最后更新于 1085 天前，文中所描述的信息可能已发生改变，请谨慎使用。

最近项目中遇到了这样一个问题，屏幕底部有一个使用fixed固定位置的input输入框。在用键盘唤起之后，会出现input底部和软键盘顶部间距时大时小，以及input光标莫名其妙跑到input元素外部的奇怪问题。

问题

正常情况：

第二次点击input底部的input输入框时，和软键盘的间距异常，同时input输入框的光标错位：

虽然input的光标错位了，但是调试器可以看出input的位置其实是正常的：

分析

为了兼容底部安全区域，我在页面中使用了CSS变量的形式进行处理：

page {
    --safe-bottom: constant(safe-area-inset-bottom);
    --safe-bottom: env(safe-area-inset-bottom);
}

这样在编写涉及到底部安全区的元素，例如TabBar时，就可以这样处理：

<view class="tabbar fixed">
    ...
</view>

<style>
.tabbar {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24rpx 12rpx calc(var(--safe-bottom) + 24rpx);
}
</style>

这样就可以很舒服地兼容底部安全区的问题。

在这个底部输入框中我也采用了这种方式进行兼容，见下图。

那么为什么在软键盘被呼起之后input发生了如此诡异的问题呢？经过在调试器上的实验后，我发现在软键盘拉起之后，底部安全区的CSS变量成为了0。

在iOS15的Safari浏览器上测试了一下，在软键盘弹起时底部安全区的CSS变量的确变成了0，但是并不会出现input光标位置异常的问题。至于为什么在微信小程序上会出现这种问题就不得而知了。

修复

既然是底部安全区的CSS变量引起的位置错乱，那让底部安全区的CSS变量不变化就好了。

const { safeAreaInsets } = wx.getSystemInfoSync();
const styles = `--safe-bottom: ${safeAreaInsets.bottom}px`;

获取屏幕底部的安全区域像素，然后以css变量的形式将styles赋值给底部fixed容器；这样即使呼起了软键盘，CSS变量也不会变化，自然就不会出现闪烁的问题了。