via二次元CSS适配哔哩哔哩视频页面失效？

Question

近期部分用户反馈，Via浏览器中启用“二次元CSS”主题后，哔哩哔哩视频页面出现样式错乱或功能失效问题，表现为播放器错位、弹幕按钮消失、顶部导航遮挡等内容渲染异常。该问题主要源于B站前端频繁更新，导致原有CSS选择器失效或结构不匹配，加之Via浏览器注入时机与页面异步加载存在时序冲突，使得自定义样式未能正确应用。此外，部分CSS规则因未适配移动端响应式布局，进一步加剧了显示异常。

Answer 1

一、问题背景与现象描述

近期，部分用户在使用Via浏览器并启用“二次元CSS”主题时，访问哔哩哔哩（B站）视频页面出现显著的UI渲染异常。典型表现为：播放器位置错位、弹幕开关按钮消失、顶部导航栏遮挡内容区域、推荐列表布局混乱等。

• 播放器脱离正常容器，浮动于页面上方或下方
• 关键功能按钮（如投币、收藏、分享）不可见或点击无响应
• 移动端适配失效，字体过大或元素溢出视口
• CSS注入后导致原有JavaScript组件初始化失败

二、根本原因分析

该问题并非单一因素所致，而是多层技术冲突叠加的结果。以下是按影响层级由浅入深的剖析：

1. CSS选择器过期：B站前端频繁迭代，DOM结构变更导致原主题中使用的类名或ID已不存在或语义改变。
2. 注入时机不匹配：Via浏览器通过User CSS机制注入样式，但其执行发生在页面初始加载阶段，而B站大量内容通过React异步渲染，此时DOM尚未构建完成。
3. specificity 冲突：B站使用高优先级的内联样式和CSS-in-JS方案（如styled-components），用户CSS难以覆盖。
4. 响应式断点缺失：主题未针对移动设备设置媒体查询，固定宽度/定位导致布局崩塌。
5. z-index 层叠竞争：自定义样式提升某些元素层级，意外遮挡交互控件。

三、技术排查流程图

```mermaid
graph TD
    A[用户反馈样式异常] --> B{是否启用二次元CSS?}
    B -- 是 --> C[检查当前B站DOM结构变化]
    B -- 否 --> D[排除主题影响]
    C --> E[对比历史选择器与现网差异]
    E --> F[确认是否存在class重命名或嵌套变更]
    F --> G[检测CSS注入时间点]
    G --> H[监听页面load与DOMContentLoaded事件]
    H --> I[判断样式是否被后续JS动态覆盖]
    I --> J[验证媒体查询适配性]
    J --> K[输出修复建议]
```
    

四、解决方案矩阵

方案类型	实施难度	稳定性	适用场景	推荐指数
更新CSS选择器	低	中	结构微调	★★★☆☆
延迟注入脚本	中	高	异步加载页	★★★★☆
MutationObserver监听DOM	高	极高	频繁变更站点	★★★★★
添加@media响应规则	低	高	移动端适配	★★★★☆
使用!important提升权重	低	低	临时覆盖	★★☆☆☆
封装为Userscript+GM_addStyle	中	高	长期维护	★★★★☆
请求头伪装成PC端	中	中	规避移动端限制	★★★☆☆
本地代理重写CSS资源	高	极高	企业级部署	★★★★★
AI驱动的选择器自动映射	极高	待验证	未来方向	★★★☆☆
社区协作维护GitHub仓库	低	持续	开源生态	★★★★★

五、代码修复示例

以下是一个改进版的CSS片段，结合了动态注入与移动端适配策略：

/* 修复播放器错位 */
@supports (display: grid) {
  .bpx-player-container {
    position: static !important;
    margin: 16px auto !important;
  }
}

/* 弹幕按钮恢复显示 */
.video-page .danmaku-switch {
  display: flex !important;
  opacity: 1 !important;
}

/* 防止顶部导航遮挡 */
#header {
  position: relative !important;
  z-index: 1 !important;
}

/* 移动端响应式适配 */
@media (max-width: 768px) {
  .secondary-css-theme .recommend-card {
    flex-direction: column !important;
    padding: 8px;
  }
  .video-page .player-wrapper {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}

/* 使用MutationObserver确保样式重应用 */
window.addEventListener('load', function() {
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length > 0) {
        // 重新应用关键样式
        document.documentElement.style.setProperty('--custom-theme-ready', 'true');
      }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
});