【报Bug】safe-area-inset-* css变量失效

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： macOS 11.6

HBuilderX类型：正式

HBuilderX版本号： 3.2.12

手机系统： iOS

手机系统版本号： iOS 15

手机厂商：苹果

手机机型： iPhone11

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

<template>  
  <view class="main">  
    <view class="footer"></view>  
  </view>  
</template>  

<style lang="scss" scoped>  
.main {  
  height: 100vh;  
  background: red;  
  position: relative;  
}  

.footer {  
  position: absolute;  
  background: blue;  
  left: 0;  
  right: 0;  
  height: 40px;  
  bottom: 0px;  
  bottom: constant(safe-area-inset-bottom);  
  bottom: env(safe-area-inset-bottom);  
}  
</style>

预期结果：

safe-area-inset-* 安全区变量生效，footer组件和屏幕底部安全区保持距离。

实际结果：

safe-area-inset-* 安全区变量无效，footer组件和屏幕底部安全区距离为0。

bug描述：

新建立的vue3项目，vue页面，安全区变量全部失效，表现为0。

//  pages.json  
"globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "Loading",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8",  
        "titleNView": false,  
        "contentAdjust": "false",  
        "bounce": "none",  
        "safearea": {  
            "bottom": {  
                "offset": "none"  
            }  
        }  
    }

// manifest.json  

"app-plus" : {  
        "usingComponents" : true,  
        "nvueStyleCompiler" : "uni-app",  
        "compilerVersion" : 3,  
        "splashscreen" : {  
            "alwaysShowBeforeRender" : true,  
            "waiting" : true,  
            "autoclose" : true,  
            "delay" : 0  
        },  
        "safearea": {  
            "bottom": {  
                "offset": "none"  
            }  
        },  
}

2021-11-12 22:45 负责人:DCloud_UNI_LXH 分享