Safari浏览器下mix-blend-mode: color渲染异常的解决方法咨询

修复思路 #

• 触发Safari GPU合成：mix-blend-mode: color在Safari下仅对GPU合成层生效，需要给参与混合的两个元素添加合成层触发属性，比如transform: translateZ(0)或者will-change: mix-blend-mode
• 明确混合上下文：给两个元素外层新增容器，设置isolation: isolate，指定混合仅在容器内部生效，避免Safari误将元素和页面底层透明背景混合导致失效
• 拆分半透明属性：Safari对带alpha通道的渐变做color混合存在渲染bug，可将渐变的透明度从rgba中拆分，单独写到opacity属性上

修复后代码示例 #

CSS

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  isolation: isolate;
  width: 600px;
  height: 400px;
}

#image{
  display: block;
  position: absolute;
  background: url(https://i.picsum.photos/id/1070/800/600.jpg?hmac=TQrM01Rpkjic5HhbuMrBGEdrR3mjDSyubaTTRmkMqVU);
  background-size: cover;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}

#overlay{
  display: block;
  position: absolute;
  background: linear-gradient(120deg, rgba(178,151,4,1) 0%, rgba(43,48,59,1) 100%);
  width: 100%;
  height: 100%;
  mix-blend-mode: color;
  /* 单独设置透明度替代渐变内的rgba半透明 */
  opacity: 0.85;
  transform: translateZ(0);
}

HTML

<div class="wrap">
  <div id="image"></div>
  <div id="overlay"></div>
</div>

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