烫了个发
烫了个发
  • 发布:2021-11-12 22:45
  • 更新:2021-12-14 16:50
  • 阅读:468

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.2.12

手机系统: iOS

手机系统版本号: iOS 15

手机厂商: 苹果

手机机型: iPhone11

页面类型: vue

vue版本: vue3

nvue编译模式: fast

打包方式: 云端

项目创建方式: 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 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

bug 已确认,已加分,预计下版修复

  • 烫了个发 (作者)

    修复之后麻烦提醒一下我,谢谢了!

    2021-12-05 09:49

DCloud_UNI_LXH

DCloud_UNI_LXH

alpha 3.3.1 已修复

  • PhilipJc

    通过 cli 创建的 vue3ts 项目还是有这个问题....

    2021-12-16 21:50

  • DCloud_UNI_LXH

    回复 PhilipJc: 可能是命令创建出来的项目依赖版本低,你可以手动升级试试

    2021-12-17 14:57

要回复问题请先登录注册