移动端滚动时出现异常白色方块 clip-path适配问题求助

问题原因 #

移动端WebKit内核浏览器（Safari、安卓系统内置浏览器、微信内置浏览器等）对clip-path属性的重绘逻辑存在适配缺陷，结合固定定位元素滚动时触发的频繁重绘，会出现绘制残留白块，同时重绘计算量过高导致滚动卡顿。

修复方案 #

1. 全局基础样式修复 #

清除移动端默认边距，禁用滚动溢出行为，避免绘制误差：

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  background: #fff;
}

2. 优化clip-path属性配置 #

给所有使用clip-path的元素添加硬件加速触发属性、浏览器前缀，同时删除冗余坐标点：

• 优化.hero-inner的clip-path，删除重复坐标，添加兼容属性：

.hero-inner {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* 新增兼容属性 */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: translateZ(0);
  will-change: clip-path;
}

• 优化.content:before的三角形实现，优先用兼容性更好的border方案替代clip-path，彻底避免绘制问题：

.content:before {
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 0;
  /* 用border实现三角形，删除clip-path */
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-bottom: 100px solid #fff;
  z-index: 99;
  transform: translateZ(0);
}

3. 固定定位元素层级优化 #

给figure和.hero__title设置明确的层级，避免滚动时层级错乱导致的绘制异常：

figure {
  z-index: 1;
}
.hero__title {
  z-index: 2;
}

完成以上修改后即可解决移动端白块和卡顿问题。

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