修复： 回到顶部按钮和进度条不显示的bug

src/scripts/back-to-top.ts

@@ -7,16 +7,31 @@ import { onPage } from "./lifecycle"
  * 淡入，不需要任何 scroll 监听（见 global.css 的 .back-to-top）。
  * 这里只负责两件事：
  *   1. 点击后平滑回到顶部；
- *   2. 给不支持滚动驱动动画的浏览器（Firefox < 144 / Safari < 26）做降级。
+ *   2. 兜住「CSS 那条动画没生效」的所有情况 —— 既包括不支持滚动驱动动画的浏览器
+ *      （Firefox < 144 / Safari < 26），也包括规则被构建压缩弄坏的情况（见下）。
  */
 
-/** 与 global.css 里 animation-range 的起点保持一致 */
+/** 与 global.css 里 animation-range 的起点呼应 */
 const REVEAL_AFTER_PX = 480
 
-const supportsScrollTimeline = () =>
-  typeof CSS !== "undefined" &&
-  typeof CSS.supports === "function" &&
-  CSS.supports("animation-timeline: scroll()")
+/** global.css 中 @keyframes 的名字，用来实测动画有没有真的挂上 */
+const ANIMATION_NAME = "back-to-top-reveal"
+
+/**
+ * 「CSS 那条滚动驱动动画到底有没有生效」——直接读计算样式，而不是做特性检测。
+ *
+ * 为什么不用 CSS.supports("animation-timeline: scroll()")：它只回答「这个语法浏览器认不认」，
+ * 回答不了「这条规则有没有在构建压缩中活下来」。实际的坑是：Lightning CSS 会把
+ * animation-timeline 合并进 animation 简写，而 WebKit 不认简写里的 timeline 分量，
+ * 整条声明被丢弃 —— 此时 CSS.supports 仍然返回 true，于是降级分支永远不执行，
+ * 按钮就永远停在 opacity:0。改读 animationName 之后，CSS 那边无论因为什么原因没生效，
+ * 这里都能立刻发现并接管（详见 global.css 里 .back-to-top 的注释）。
+ */
+const cssDrivesVisibility = (button: HTMLElement) =>
+  window
+    .getComputedStyle(button)
+    .animationName.split(",")
+    .some((part) => part.trim() === ANIMATION_NAME)
 
 onPage("back-to-top", () => {
   const button = document.querySelector<HTMLElement>("[data-back-to-top]")
@@ -28,7 +43,7 @@ onPage("back-to-top", () => {
   }
   button.addEventListener("click", onClick)
 
-  if (supportsScrollTimeline()) {
+  if (cssDrivesVisibility(button)) {
     return () => button.removeEventListener("click", onClick)
   }