带线性渐变的背景图在Safari正常显示但Chrome不显示的问题

问题原因 #

这是Chrome浏览器处理clip-path与多层背景（渐变+图片）组合时的渲染兼容性问题。部分Chrome版本中，当元素同时设置clip-path和包含渐变的多层背景时，背景图片会被错误隐藏，仅显示渐变层；而Safari对该组合的渲染逻辑更完善，因此能正常显示效果。

修复方案 #

方案1：用伪元素分离渐变与背景图

将渐变层独立到元素的伪元素中，背景图保留在原元素，避免渲染冲突：

.hero {
  display: grid; 
  place-items: center;
  padding: 0;
  margin: 0;
  height: 95vh;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png);
  background-size: cover;
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 33%,
      hsla(224, 62%, 29%, 0.9),
      rgba(228, 24, 27, 0.8)
    );
  pointer-events: none;
}

HTML结构无需修改。

方案2：禁用硬件加速（临时 workaround）

若不想调整CSS结构，可尝试禁用元素的硬件加速，强制Chrome使用软件渲染：

.hero {
  /* 保留原有所有属性 */
  backface-visibility: hidden;
}

此方法可能影响页面性能，仅作为临时替代方案，优先推荐方案1。

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