同时使用position: sticky与transform: scale()出现内容跳变问题求助

这个问题我之前也碰到过，本质是position: sticky的布局渲染特性和transform: scale()触发的GPU加速交互，引发了像素对齐的细微偏差。给你两个可行的解决方案：

方案一：稳定Sticky元素的渲染上下文 #

通过给sticky容器添加不影响视觉的GPU触发属性，同时明确transform的轴向，减少不必要的计算干扰：

.scroll-spy {
  position: sticky;
  top: 10px;
  transform: translateZ(0); /* 触发GPU加速，稳定渲染层上下文 */
}

.scroll-spy a span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--dark);
  visibility: hidden;
  transform: scaleX(0); /* 明确使用scaleX，仅在X轴缩放 */
  transition: .25s linear;
}

.scroll-spy a:hover span:after {
  visibility: visible;
  transform: scaleX(.8); /* 保持X轴缩放，避免Y轴布局干扰 */
}

方案二：用宽度过渡替代Transform Scale #

彻底绕开transform的渲染特性，改用宽度动画实现下划线效果，完全避免像素对齐问题：

.scroll-spy a span:after {
  content: "";
  position: absolute;
  width: 0; /* 初始宽度为0 */
  height: 1px;
  bottom: -2px;
  left: 10%; /* 对应scale(0.8)的左右留白比例 */
  background-color: var(--dark);
  transition: width .25s linear; /* 过渡宽度属性 */
}

.scroll-spy a:hover span:after {
  width: 80%; /* 对应scale(0.8)的显示宽度 */
}

问题根源解释 #

• position: sticky元素虽然视觉上类似fixed，但它仍属于文档流的一部分，浏览器对它的布局计算和普通元素关联更紧密；而transform: scale()会触发GPU加速，将元素放入独立渲染层，两者的渲染上下文切换时容易出现像素级的对齐偏差，导致右侧内容跳变。
• position: fixed能正常工作，是因为fixed元素完全脱离文档流，它的transform操作不会影响其他流式元素的布局计算，所以没有这个问题。

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