等下班

发布：2023-09-13 10:13
更新：2023-12-21 10:10
阅读：195

【报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.zip

开启blurEffect.zip

blurEffect.zip

2023-09-13 10:13 负责人:DCloud_App_Array 分享

4 个回复

等下班 (作者) - 1111111

连发4天也没有人回复，6

JiYis - JiYis

你尝试加一个这个看看，还会不会抖动：transform: translate3d(0, 0, 0);

等下班 (作者)

试过了，一样会抖动，主要是开启这个之后，tabbar页面整体的性能都下降了。

2023-09-13 16:04
JiYis

回复等下班: 肯定的，渲染模式变了

2023-09-13 16:27

3***@qq.com

这个毛玻璃模式，拖动会一直闪屏特别是含有swiper幻灯片的，坐等官方更新解决

3***@qq.com

有人没有呀

要回复问题请先登录或注册

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

示例代码：

`"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描述：

4 个回复

公告

相关问题

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

示例代码： "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描述：

与内容相关的链接

4 个回复

公告

相关问题

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

示例代码：

`"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页面元素闪动, 页面滚动不流畅