CSS锚点特性问题：锚定按钮无法跟随平移侧边栏同步移动

我正在使用实验性的CSS锚点（CSS anchors）特性，尝试将一个按钮锚定在侧边栏的右侧。侧边栏关闭时通过transform: translateX(100%)移出屏幕，打开时恢复原位，但锚定的按钮无法跟随侧边栏移动。使用Chrome版本为130.0.6723.116。

代码示例 #

HTML #

<div>
  <aside></aside>
  <button>Expand</button>
</div>

CSS #

div {
  background: red;
  height: 200px;
}

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: 0;
  inset-block: 0;
  transition: all 1s;
  transform: translateX(100%);
  anchor-name: --anchor-name;
}

aside[aria-expanded="true"] {
  transform: translateX(0);
}

button {
  position: absolute;
  position-anchor: --anchor-name;
  right: anchor(--anchor-name left);
  top: 50%;
  transform: translateY(-50%);
}

body { margin: 0; }

JavaScript #

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('aside').setAttribute("aria-expanded", "true");
  }
)

问题原因 #

CSS锚点目前的实验性实现中，仅基于元素的原始布局位置计算锚点，不会考虑transform变换后的视觉位置。侧边栏的transform: translateX(100%)只是视觉上移动了元素，但锚点仍会使用它未变换前的原始位置，导致按钮无法跟随。

可行解决办法 #

方法1：改用布局属性控制侧边栏显示/隐藏 #

放弃transform，改用right属性调整侧边栏的布局位置，这样锚点能正确追踪元素的实际布局位置：

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: -30px; /* 初始隐藏到屏幕右侧外 */
  inset-block: 0;
  transition: all 1s;
  anchor-name: --anchor-name;
}

aside[aria-expanded="true"] {
  right: 0; /* 恢复到屏幕右侧 */
}

方法2：用CSS变量同步按钮的transform值 #

如果必须保留transform实现，可以通过CSS变量将侧边栏的平移值同步给按钮，手动实现跟随效果：

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: 0;
  inset-block: 0;
  transition: all 1s;
  transform: translateX(100%);
  --sidebar-translate: translateX(100%);
}

aside[aria-expanded="true"] {
  transform: translateX(0);
  --sidebar-translate: translateX(0);
}

button {
  position: absolute;
  right: 30px; /* 对应侧边栏宽度，初始在侧边栏左侧位置 */
  top: 50%;
  transform: translateY(-50%) var(--sidebar-translate);
  transition: all 1s;
}

内容的提问来源于stack exchange，提问作者Symtox