为什么Windows10系统Edge88浏览器中点击复选框时测试文本会短暂消失？

基础测试信息 #

• 运行环境：Windows 10 操作系统、Microsoft Edge 88 版本浏览器
• 异常表现：点击页面复选框控件的瞬间，页面内的测试文本会出现1~2帧的短暂消失闪烁
• 复现条件：配套的可运行测试demo可直接触发该异常，无需额外前置操作

异常产生的核心原因 #

该现象是Edge 88版本（基于Chromium 88内核）的已知渲染缺陷，具体触发逻辑为：

• 该版本内核在处理复选框:checked伪类状态切换的过程中，会优先为复选框的选中态样式创建独立合成层；如果页面内的测试文本和复选框处在同一个共享渲染层、没有被单独提升为独立合成层，内核会在合成层创建的时间窗口内，临时将共享层内的文本节点判定为待重绘内容，暂时清空文本的像素绘制内容
• 当复选框的点击逻辑和文本样式存在绑定联动（比如点击复选框后会同步修改文本的颜色、透明度等样式属性）时，样式计算任务和合成层创建任务会出现线程抢占，进一步拉大临时消失的视觉感知时长

常见临时规避方案 #

• 给测试文本节点单独添加will-change: transform样式，强制将文本节点提升为独立合成层，从渲染逻辑上和复选框的状态切换过程隔离开
• 把复选框点击后触发的文本样式联动逻辑，放到requestAnimationFrame回调中延后一帧执行，错开合成层创建的时间窗口，避免渲染任务抢占

内容的提问来源于stack exchange，提问作者newpost