改变web组件的visibility导致浏览器崩溃的分析报告

鸿蒙小橙娃 2023-03-14 09:27:36

1 关键字

浏览器;web组件;visibility;浏览器崩溃

2 问题描述

问题现象:在OpenHarmony 3.1 Release的RK3568上。使用app模拟测试发现在使用两个web组件打开页面时,先让第一个web组件显示一个url页面,显示正常;然后让第一个web组件的visibility设置为隐藏,再使用web组件创建新页面,发现appspwawn和nwebspawn孵化的进程全部被杀掉。

使用https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Web 的browser app测试修改其中的WebComponent.ets 文件,若自行添加如下代码段,发现app容易崩掉;

@State aaa: boolean = true
aboutToAppear() {
setTimeout(() => {
this.aaa = false
}, 5000)
}

Flex() {
Web({ src: 'www.baidu.com', controller: new WebController()})
.width('60%')
.height('60%')
}
.visibility(!this.aaa ? Visibility.Visible : Visibility.None)
Flex() {
Web({ src: 'www.gitee.com', controller: new WebController()})
.width('60%')
.height('60%')
}
.visibility(this.aaa ? Visibility.Visible : Visibility.None)
}

测试步骤:首先测试如上代码是否有问题,然后注释掉一半web 组件,测试是不是多个组件引起的;然后把 visibility加在web组件上测试是否会引发问题;再将visibility放回外层组件上,在log中查看哪里报错,根据log查看源码,发现在这一步系统把内层的web组件的大小设置为了0;然后给web组件加上width=0,height = 0,测试是否会有问题。

3 问题原因

3.1 正常机制

Web组件外层容器设置visibility显隐属性不会引起崩溃。

3.2 异常机制

Web组件外层容器设置visibility显隐属性会引起崩溃。

4 解决方案

在Web组件上直接设置visibility,并且避免将width和height设置为0

5 定位过程

1.崩溃与Web组件外层容器设置 visibility 显引属性有关。

2.外层容器设置 visibility 隐藏后底层处理逻辑会给内部 Web 组件设置 width = 0 height = 0 并重新渲染 Web 组件,导致应用崩溃。

3.直接给 Web 容器设置 width = 0,height = 0 会导致应用崩溃。

4.在 Web 组件上直接设置 visibility 显隐属性应用不崩溃。

5.visibility 可以直接加到 Web 组件上,应用也不会崩溃,但是 Web 组件的width和height不能设置为0,这样一定会导致应用崩溃。

6.if else 本身会把组件从页面上移除了,而visibility不会移除组件,使用 if else 再显示的时候要重新加载页面,visibility则不需要重新加载页面。

7.崩溃与加载多个Web组件无关。

6 知识分享

在设置容器和组件显隐属性时,尽量不要在外层设置整体的显隐属性,而是为每一个组件单独设置显隐属性。

...全文
19 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

513

社区成员

发帖
与我相关
我的任务
社区描述
OpenHarmony开发者社区
其他 企业社区
社区管理员
  • csdnsqst0025
  • shewaliujingli
  • BaoWei
加入社区
  • 近7日
  • 近30日
  • 至今

试试用AI创作助手写篇文章吧