安卓Chrome中使用Divi的clip-path polygon()时第三张图消失求助

• 拆分复杂polygon路径
  安卓Chrome对超长的clip-path: polygon()路径存在渲染稳定性问题，建议将复杂路径拆分为多个简单路径，通过伪元素或多层容器叠加实现最终裁剪效果。比如：

  .image-wrapper {
    position: relative;
    overflow: hidden;
  }
  .image-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    background: #fff;
    z-index: 1;
  }
  .image-wrapper img {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  }
  

• 强制触发GPU加速
  给第三张图片的容器添加硬件加速属性，避免渲染引擎因资源回收导致图片消失：

  .third-image-container {
    transform: translateZ(0);
    will-change: clip-path;
    backface-visibility: hidden;
  }
  

• 替换为SVG Mask
  改用SVG mask实现裁剪，安卓Chrome对SVG mask的兼容性更稳定：
  先定义SVG mask：

  <svg style="display: none;">
    <defs>
      <mask id="custom-mask">
        <!-- 替换为你的polygon路径坐标 -->
        <polygon points="0 0, 100% 0, 100% 80%, 80% 100%, 0 100%" fill="#ffffff"/>
      </mask>
    </defs>
  </svg>
  

  然后给图片应用mask：

  .third-image {
    mask: url(#custom-mask);
    -webkit-mask: url(#custom-mask);
  }
  

• 调整图片加载时机
  延迟加载第三张图片，避免与前两张图片的渲染资源竞争：

  const img1 = document.querySelector('.first-image');
  const img2 = document.querySelector('.second-image');
  const img3 = document.querySelector('.third-image');
  
  Promise.all([
    new Promise(resolve => img1.onload = resolve),
    new Promise(resolve => img2.onload = resolve)
  ]).then(() => {
    img3.src = img3.dataset.src;
  });
  

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