【报Bug】APP开启blurEffect，导致页面元素抖动，页面滚动性能降低。打卡第二天

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： window 11

HBuilderX类型：正式

HBuilderX版本号： 3.8.12

手机系统： Android

手机系统版本号： Android 12

手机厂商： OPPO

手机机型： FINDX 3 PRO

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

    "tabBar": {    
        "fontSize": "10px",    
        "height": "50px",    
        "borderStyle": "white",    
        "selectedColor": "#FB1F1E",    
        "color": "#C7C7C7",    
        "iconWidth": "24px",    
         "blurEffect": "extralight"    
    }

操作步骤：

    "tabBar": {    
        "fontSize": "10px",    
        "height": "50px",    
        "borderStyle": "white",    
        "selectedColor": "#FB1F1E",    
        "color": "#C7C7C7",    
        "iconWidth": "24px",    
         "blurEffect": "extralight"    
    }

预期结果：

开启blurEffect页面元素不闪动, 页面滚动流畅

实际结果：

开启blurEffect页面元素闪动，页面滚动不流畅

bug描述：

页面开启blurEffect高斯模糊后，编译到APP,导致tabbar页面滚动时页面元素抖动闪动，特别是使用position: sticky;已经position: absolute;的元素。以及页面滚动性能下降，流畅度降低。复现demo已上传，附件3：blurEffect.zip;附件1，附件2：录屏

开启blurEffect.zip

关闭blurEffect.zip

blurEffect.zip

2023-09-11 14:10 负责人:DCloud_App_Array 分享