在Safari上使用时的适配性优化 - #94
Open
moonchime wants to merge 2 commits into
Open
Conversation
Safari treats the extension's content_scripts-injected page-level stylesheet as a user stylesheet, and WebKit injects user stylesheets into every shadow tree on the page. The bare :host selectors in variables.scss / fonts.scss were written for the copy of this stylesheet loaded inside our own shadow root, and should never match in the page-level copy — but under this behavior they unexpectedly matched bilibili's web components (e.g. <bili-comments>) as well. Since the light theme values live in the unconditional :host block while the dark block :host(.dark) requires the host element itself to carry the dark class (bilibili's elements never do), those hosts got pinned to light theme variables even in dark mode, and these directly matched declarations override the dark values inherited from html — leaving comment text dark-on-dark and barely readable. Safari 会将扩展通过 content_scripts 注入的页面级样式表视作 user stylesheet，而 WebKit 会把 user stylesheet 注入页面上的每一棵 shadow tree。variables.scss 和 fonts.scss 里的裸 :host 选择器本是为 shadow root 内加载的副本而写、在页面级副本中本应永不匹配，却因此意外命中了 bilibili 的 Web Components（如 <bili-comments>）。由于亮色变量定义在无条件的 :host 默认块里，而暗色块 :host(.dark) 要求宿主自带 dark 类（bilibili 的原生元素上不存在），这些宿主在暗色模式下仍被设置了亮色主题变量，直接命中的声明又压过从 html 继承的暗色值，最终评论文字在深色底上呈深色、基本不可读。 Note: the :host(#bewly) argument is coupled to the container id created in contentScripts/index.ts. 注意：:host(#bewly) 的参数与 contentScripts/index.ts 中创建的容器 id 相互耦合，重命名时需同步修改。 Assisted-by: Claude Fable 5 <noreply@anthropic.com>
The sprite string carried two <defs><style> blocks pointing at a hardcoded chrome-extension:// font URL. Safari blocks the load and spams console warnings on every page; the font was never used by anything. SVG 精灵图（sprite）字符串里夹带了两段 <defs><style>，指向一个硬编码的 chrome-extension:// 字体地址。Safari 会拦截该加载并在每个页面刷控制台警告；而这个字体从未被实际使用过。 Assisted-by: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
这则PR中的主要改动是对 :host 类选择器的细化调整，使它们明确地仅作用于合适的范围内，即使在特殊情况下也不会泄露到过大的范围。
未修复情况下，在使用Safari、选择暗色模式时，评论区本身的深色底色上的正文字体仍为深色（具体原因见commit），可读性会受损到难以阅读的程度。
虽然这是一个属于非（主要）支持的平台Safari的特殊问题，但修复内容应当是不会对主要支持的平台Chrome和Firefox造成负面影响的，因此不会对主要维护的平台的用户造成体验损失，尽管确实存在带来的长期维护负担（今后需要保持对作用域的注意）但相对有限。
在svg-icons的杂项修整中，对于过大的单行diff可以使用例如
git diff --word-diff的命令进行实际改动内容验证。（以上内容为手写。）