uni-app CSS position: fixed在安卓设备出现位置下移问题

uni-app CSS position: fixed在安卓设备出现位置下移问题

示例代码：

.extract-opertion{
width: 100%;
height: 240rpx;
position: fixed;
bottom: 0rpx;
background-color: #f3f6f8;
}

直接将这个class加载元素上就可以看到效果.

操作步骤：

将该css类添加到页面元素. 程序不退到后台,直接锁屏.锁屏前,页面元素位置是对的,但是解锁屏幕,页面元素就下移了.

预期结果：

页面元素固定不变,位置不下移.

实际结果：

页面元素位置下移.

bug描述：

程序不退到后台,直接锁屏.锁屏前,页面元素位置是对的,但是解锁屏幕,页面元素就下移了. 页面元素代码: .extract-opertion{ width: 100%; height: 240rpx; position: fixed; bottom: 0rpx; background-color: #f3f6f8; } 直接将这个class加载元素上就可以看到效果. 附件中是录制的问题视频.

附件：

Screenrecorder-2021-07-08-08-25-55-71.mp4_.zip


更多关于uni-app CSS position: fixed在安卓设备出现位置下移问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

找朋友帮忙测试了一下,测试机器是vivo的.他的机器就没有这个问题.稀碎.希望官方再确认一下问题.

更多关于uni-app CSS position: fixed在安卓设备出现位置下移问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的安卓系统级问题，与uni-app框架本身无关。当应用锁屏后，系统导航栏（虚拟按键栏）的状态发生变化，导致窗口高度计算出现偏差，fixed定位元素会跟随下移。

解决方案：

  1. 使用css变量动态适配（推荐）
.extract-opertion {
  width: 100%;
  height: 240rpx;
  position: fixed;
  bottom: calc(0rpx + constant(safe-area-inset-bottom));
  bottom: calc(0rpx + env(safe-area-inset-bottom));
  background-color: #f3f6f8;
}
  1. 监听窗口变化重置位置
onShow() {
  // 修复安卓锁屏后fixed定位异常
  uni.onWindowResize((res) => {
    this.$nextTick(() => {
      // 强制重绘
    })
  })
}

  1. 使用absolute定位替代 如果元素不需要全程固定，可改用absolute定位，在页面最底部放置该元素。

  2. 设置viewport-fit=cover 在pages.json中对应页面样式配置：

{
  "style": {
    "app-plus": {
      "safearea": {
        "bottom": {
          "offset": "none"
        }
      }
    }
  }
}
回到顶部