Chrome浏览器点击锚点时CSS translateX属性意外重置问题

长单页站点配置左侧带动画效果的侧边菜单，菜单展开时通过CSS给内容包裹容器.wrapper添加translateX偏移，将正文右移避免被菜单遮挡。
点击菜单内的原生锚点链接跳转对应内容区块时，锚点跳转功能本身正常，但.wrapper上设置的平移动画效果会意外复位。通过DevTools检查元素计算样式，未发现对应CSS规则被修改或移除。

• 该异常仅在Chrome、Brave等Chromium内核浏览器中复现，Safari浏览器下交互表现完全正常。

CSS部分 #

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
}
.menu {
  position: fixed;
  background: green;
  padding: 20px;
  z-index: 999;
}
.section {
  min-height: 400px;
  margin: 20px;
  background: red;
}
.wrapper {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}
body.menu-open .wrapper {
  transform: translateX(95px);
}

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>复现Demo</title>
</head>
<body class="menu-open">
  <div class="menu">
    <a href="#test1">test1</a>
    <a href="#test2">test2</a>
  </div>
  <div class="wrapper">
    <br /><br /><br />  
    <div class="section" id="test1">test1</div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="section" id="test2">test2</div>
  </div>
</body>
</html>

这是Chromium内核的已知渲染合成bug：当页面开启scroll-behavior: smooth触发原生平滑锚点滚动时，浏览器内核在计算滚动目标位置的过程中，会临时忽略非独立合成层元素的transform变换矩阵，导致视觉上出现变换复位的效果。整个过程中DOM结构、CSS类名、样式规则均未发生实际变更，属于渲染层的计算错误。

任选以下一种方案即可解决问题：

• 方案1：给.wrapper元素添加will-change: transform属性，强制浏览器为该元素创建独立的合成层，避免平滑滚动计算时错误重置变换状态：

.wrapper {
  will-change: transform;
  /* 原有过渡属性保留即可 */
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}

• 方案2：避开transform实现偏移，改用margin-left或padding-left属性实现菜单展开时的内容右移效果，这类布局属性不会触发该合成bug：

/* 移除.wrapper上的transform相关规则，将偏移和过渡效果绑定到body */
body {
  -webkit-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -moz-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  -o-transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
  transition: 0.5s cubic-bezier(0.66, 0, 0, 0.88);
}
body.menu-open {
  margin-left: 95px;
}

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