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

[鸿蒙小橙娃]

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 知识分享

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