Chrome浏览器clip-path配合固定定位元素渲染异常问题求助

该异常是Chrome 114及更高版本渲染引擎优化引入的已知Bug：当带clip-path属性的容器内包含position: fixed的子元素时，页面滚动过程中Chrome不会正确触发对应图层的重绘，导致显示错乱，该问题仅出现在Chrome内核高版本浏览器中，非Chromium内核版Edge、Firefox不受影响。

• 方案1：为带clip-path属性的.child元素添加will-change: clip-path属性，强制Chrome将该元素提升为独立合成层，触发正常重绘逻辑，是最推荐的修复方式，修改后的.child样式如下：

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  will-change: clip-path;
}

• 方案2：如果担心will-change的性能消耗，可替换为transform: translateZ(0)，同样可以实现提升合成层的效果，兼容更低版本Chrome：

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transform: translateZ(0);
}

• 方案3：从布局逻辑上规避Bug，将.child__title的定位从fixed改为absolute，由于其父元素.child已经是绝对定位且占满全屏，修改后视觉效果完全一致，不会触发该渲染Bug：

.child__title {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

以上任意一种方案修改后，在高版本Chrome中滚动页面即可看到内容按层级正常显示，和其他浏览器表现一致。

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