暗黑模式下up主悬浮框显示错误

[GYF0814]

对应功能

夜间模式

问题描述

在视频页面内 鼠标悬浮在up主头像上
评论区内用户正常 仅up主为白色

脚本版本

v2.9.1-preview-135-g49dab167c

脚本管理器及版本

Tampermonkey v5.3.6206`

浏览器及版本

Firerox ESR128

播放器版本

4.8.37-286d821a

播放策略

AV1

错误信息

见截图

附加截图

致遇到了相同问题准备回复的人

太长不看：
1、遇到了相同的问题：请用左下角的 reaction 点赞
2、实时关注该 Issue 的后续进展：请用 Issue 页上的 Subscribe 功能（在 PC 端按钮通常位于页面右侧）。
请您回复前务必确认您有在本 Issue 之外补充了其它相关信息（比如 Log）再行回复以免对他人造成不必要的困扰

完整版

由于每个 Issue 甚至整个项目都是可以订阅通知的, 对于已经有人汇报过的 Bug, 如果您也遇到了并且没有其他信息要补充, 可以直接在左下点个赞表示 +1, 不要再去新增评论。想关注后续的可以用 Subscribe，Subscribe 之后该 Issue 如果有变动都可以收到通知，如果不想被回复打扰可以使用更加进阶的 Customize 功能，勾选 "Closed" & "Reopened"。Closed 通常代表该 Issue 已被解决，极少数情况下的 Reopened 代表该 Issue 的问题重新出现。如果您新增了无意义评论，因为 Issue 这个 bug tracker 与邮件列表类似，订阅某个 Issue 的用户会在每次这个 Issue 有新的动态时收到一封新的提醒邮件。也就是说，在 Issue 中的一个不能提供新的信息的评论，相当于给所有订阅这个 Issue 的用户发了一封垃圾邮件（spam）。尤其项目的维护者也是订阅者中的一员，太多垃圾邮件会对维护者带来很多不必要的困扰。发送垃圾邮件在开源社区通常是不那么受欢迎的行为。

[GYF0814]

还有一个问题 就是圆角也没有了

[Crystal-RainSlide]

这是因为B站加了一个莫名奇妙至极的空白 iframe，补上这行样式即可修复：

/* 视频页 - UP主信息悬浮框 - 修复一个谜之 iframe 导致 Bilibili Evolved 暗色主题失效的问题 */
.user-card-m-exp > iframe.layout { opacity: 0; }

就先不 PR 了，方便维护者集中修复样式问题。

---

B站给 iframe.layout 的 HTML 和样式：

<iframe frameborder="0" class="layout"></iframe>

.user-card-m-exp .layout {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	z-index: -1;
	outline: none;
}

---

可以用这段代码辅助检查。执行后，UP主悬浮框不会再隐藏：

(( cache, wrap = document.querySelector(".usercard-wrap") ) =>
	new MutationObserver((_, observer) => {
		if (!cache) {
			cache = {
				style: wrap.getAttribute("style"),
				children: [...wrap.children],
			};
		} else {
			wrap.setAttribute("style", cache.style);
			wrap.replaceChildren(...cache.children);
			cache = null;
		}
	}).observe(wrap, { attributes: true, attributeFilter: ["style"] })
)();

[the1812]

我这里看起来是正常的, 那个奇怪的 iframe 也在

[GYF0814]

这是因为B站加了一个莫名奇妙至极的空白 iframe，补上这行样式即可修复：

/* 视频页 - UP主信息悬浮框 - 修复一个谜之 iframe 导致 Bilibili Evolved 暗色主题失效的问题 */
.user-card-m-exp > iframe.layout { opacity: 0; }

就先不 PR 了，方便维护者集中修复样式问题。
iframe.layout 的样式：

.user-card-m-exp .layout {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	z-index: -1;
	outline: none;
}

可以用这段代码辅助检查。执行后，UP主悬浮框不会再隐藏：

(() => {
  const wrap = document.querySelector(".usercard-wrap");
  let cache = null;
	new MutationObserver((_, observer) => {
		if (!cache) {
			cache = {
				style: wrap.getAttribute("style"),
				children: [...wrap.children],
			};
		} else {
			wrap.setAttribute("style", cache.style);
			wrap.replaceChildren(...cache.children);
			cache = null;
		}
	}).observe(wrap, { attributes: true, attributeFilter: ["style"] })
})();

请问这个样式应该放在哪里 除了使用stylus插件

[Crystal-RainSlide]

@the1812 可能是你的浏览器在夜间模式下会把 iframe 默认显示成暗色

@GYF0814 为什么纠结这个？

[Crystal-RainSlide]

发现别的地方也有这个 iframe.layout，比如关注UP主后设置分组时的 .follow-dialog-wrap .follow-dialog-window .layout。

怀疑是哪位B站开发者以这种极其蹩脚和可能浪费资源（iframe）的方式修复一个简单至极的 overflow 问题。

别干了吧这份工作！

[GYF0814]

@the1812 可能是你的浏览器在夜间模式下会把 iframe 默认显示成暗色

@GYF0814 为什么纠结这个？

因为在evolved里面加载这段代码（在自定义样式中）失败了 于是才用了别的插件

[Crystal-RainSlide]

@GYF0814 原来如此；目前 Evolved 只支持从 HTTP 网址下载自定义样式，不能直接加，转成 data URL 也不行，就先用别的东西吧（）