"tabBar": {
"fontSize": "10px",
"height": "50px",
"borderStyle": "white",
"selectedColor": "#FB1F1E",
"color": "#C7C7C7",
"iconWidth": "24px",
"blurEffect": "extralight"
}
- 发布:2023-09-11 14:10
- 更新:2024-08-06 17:04
- 阅读:378
产品分类: 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页面元素不闪动, 页面滚动流畅
实际结果:
开启blurEffect页面元素闪动,页面滚动不流畅
开启blurEffect页面元素闪动,页面滚动不流畅
bug描述:
页面开启blurEffect高斯模糊后,编译到APP,导致tabbar页面滚动时页面元素抖动 闪动 ,特别是使用position: sticky;已经position: absolute;的元素。以及页面滚动性能下降,流畅度降低。复现demo已上传,附件3:blurEffect.zip;附件1,附件2:录屏