ui-primitives MenuSurface 的 macOS backing 在真实 Chromium 上从未生效:anchor-name / position-anchor 经 var() 引用不被应用

[KannaKuron]

现象

macOS 桌面壳(透明 vibrancy 窗口)上,官方 MenuSurface 的 macOS backing(MenuSurface.module.css 中 :global(html[data-platform='darwin']) .backing)从未实际生效:菜单只有 .material 45% 半透明层,没有不透明垫底——压在网页内容上透出模糊文字,压在窗口透明区则直接透出被系统糊匀的壁纸,呈均匀亮灰(采样 ≈ (135,135,135)),与设计上 backing 生效应有的不透明深灰(≈ (42,43,46))不符。源码注释承诺的「Chromium needs opaque pixels behind the page content to blur it over native vibrancy」没有兑现。

定位

MenuSurface.tsx 用 CSS 自定义属性中转每实例锚点名:CSS 侧 anchor-name: var(--dsh-menu-anchor) 与 position-anchor: var(--dsh-menu-anchor),锚名经 inline custom property 注入。实测(Electron 44.0 / 44.7,macOS 15,透明 vibrancy 窗口):CSS.supports 对 anchor-name、position-anchor、anchor()、anchor-size() 全部返回 true,但布局不应用——backing 的 getBoundingClientRect() 为 0×0 错位;同一窗口里把锚名改为字面量(不经 var())则 backing 与 surface 完全对齐。即:Chromium 不应用经 var() 到达 anchor-name / position-anchor 的引用。

[PerryLink]

The 0×0 is a fallback, not a second bug. Two facts from the source fit your measurement.

MenuSurface.tsx:31-33 injects --dsh-menu-anchor: --dsh-menu-<id> on the surface; MenuSurface.module.css:15 consumes it as anchor-name: var(--dsh-menu-anchor); the portalled .backing gets position-anchor: var(--dsh-menu-anchor) at :41. Both sides depend on the same substitution, so if the engine drops it, no element ever has an anchor name and the backing has nothing to resolve against.

The 0×0 then follows. top: anchor(top) and left: anchor(left) (:42-43) have no fallback, so an invalid anchor function leaves them at auto; anchor-size(width, 0px) and the height equivalent (:44-45) take their explicit fallback, i.e. zero. A position: fixed box with auto offsets and zero size sits at its static position — the misalignment you measured, not a separate defect.

Your A/B is the part I would keep, because it is what isolates the engine: identical DOM, literal name aligns, var() name does not. The smallest change that stops depending on it is to write the two properties directly from MenuSurface.tsx — inline anchor-name on the surface, position-anchor on the backing, same generated string — and drop the custom property. Two lines, and the stylesheet stays the consumer.