B站直播切换「网页模式」后退出,页面出现大面积空白(疑似 Shadow Host 参与文档流导致) #183

OS/系统

Windows

Browser/浏览器

Edge

Validations

• 是否关闭其他插件/Have you close other extensions?
• 是否禁用自定义js/Have you disable custom js file?

问题描述

在 B 站直播页面中,开启本扩展后,切换播放器的「网页模式」再退出,会导致页面布局异常。

具体表现为:

• 播放器本身已经恢复到正常大小;
• 但播放器下方会留下很大一块黑色空白区域;
• 页面整体高度被异常拉长。

关闭扩展后,该问题不会出现。

复现步骤

1. 打开任意一个 B 站直播间;
2. 点击播放器右下角的「网页模式」;
3. 再退出网页模式;
4. 页面出现大面积空白。

排查过程

我使用 DevTools 对页面进行了排查,发现:

播放器本身的高度实际上是正常的,并没有异常。

进一步定位后发现,删除扩展注入的以下元素后,页面立即恢复正常:

<div style="all: initial;">
 #shadow-root (open)
 ...
</div>

检查该宿主元素(Shadow Host)的计算样式发现:

position: static;

可能与该设置有关。