Safari浏览器缩放后mix-blend-mode属性失效问题

这确实是Safari浏览器中一个已知的渲染Bug，和混合模式在页面缩放后的重绘逻辑异常有关。下面提供几种可行的解决方案，按推荐优先级排序：

1. 改用background-blend-mode替代额外DOM元素 #

这是最简洁且稳定的方案，不需要额外的绝对定位div，直接将纹理和容器背景色混合：

修改你的CSS如下：

.main-content { 
  position:relative; 
  width: 500px; 
  height: 500px; 
  background-color:lightblue; 
  border: solid 10px red;
  /* 将纹理直接作为背景图，并设置混合模式 */
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAZoAMABAAAAAEAAAAZAAAAANoMEmUAAALiaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjU8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjI1PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Ch9KojkAAAN+SURBVEgNTdVpctswDAVgipGX2E6cNLn/ofqnPUXGS7wvKj626JgzNEXg4eEBpOTu18/fQ9d15fv7u1ifnp7KZDJpczwel+PxWC6XS+n7vtRayzAMZRtYvtVmXebzedntdg2zWCwa5nw+F+Pj46PF19vtVvb7feGQYDQaNSLPyK1fX19ls9mU6XTacBJJfr1eW/KXl5cigVhCcBr3+72cTqfSU/E4gKhUFTLDKgApMfaESWSqJquW4Pn5uSXjg++RIM42IZcdqRZ5RkIlQRJJDZdkh8PhfzvFGMglxF0ZBZgSIRf0qDTBKjARwOfZeU4MPm1mw9XsTVkE2iAHoBqRRCpZrVatLbPZ7G/bAuMMLqdzOe4PpYvSrudLOez2pZauLGbzMtzuzQdTJTGQy6w1EugxW6rKnsNowT1EaZ+WfX5+NpHi8KkC3lRZZdAm6pVv5XSlDYrf398biT2/6VB/hH0Cu92WG/LwX0OYdRTk0+DbBU8vgBoKXVGZJdM6NiJyr4LcexZnL6FBrErstXYbydvBZxLqnQsAcqDWlng2kOVlgH17e2v4fAUIZHcxnCEu3K+vr6WXHQGjnhoteygVpIoMkMSzGKvzYkuhbNRLzO4llbQCZACDhGzaJomqBPHZs7tx6/W6CbA3+PDAijHh8PVU59XVIioNK5DqMkhLEGVF8HkuYvIcVS+5tnluV1h2ZBySakNWR8lyuWz2x7bC+1B2gZ/Ftb/EgZ/CNg7STEyoM65+BMuoTalcIsoFaJVnSvmNUbQHSd4iHK47nmtU2zDBpwvVBomNICQC7A2rtpmeW7WBU+l4GpdiiE9HzHjjyj2+akO8JHg2cQGIxl0ZTMoRZUIHSZkvQPr5KDUlMXVCrOSqtsJJwGdUBiRWRk7/HarJM+JDaDWyWqszhG2V/WthcqbolgRQzyXwLFhrKExCvkzKrsI8Bz5X2tsuXqWEZrU1774knIa3WRKKEDhcayqElQRh4ogx8MGyZ6L2MgJTmV9kJFkJm3bCPCpNbH5IxajMdAvhVSxpRWZyphoKOO19JpStSuodLh9MElEuCbxzkNi75+vt8rRKgCRBAogEiFq+rFTb0g5LsQ6wmRLAaivh/HgrRdRR6nZxegagDolKBOdgg2FDLkZrrLDOlN/np7U4b0C2ipMj9wJzOhtfVpXC5PuTAqhGDM+X5/wHWO18ZrEZ4QIAAAAASUVORK5CYII=');
  background-blend-mode: multiply;
}

然后移除HTML中的.texture div即可：

<div class="main-content"> Lorem Ipsum </div>

这种方式不需要额外的DOM元素，渲染逻辑更简单，能从根源上避开Safari的这个Bug。

2. 监听缩放事件强制触发重绘 #

如果你必须保留原有的DOM结构，可以通过JS监听页面缩放相关事件，强制浏览器重新渲染纹理元素：

// 监听窗口resize事件（Safari的pinch缩放会触发此事件）
window.addEventListener('resize', () => {
  const textureElement = document.querySelector('.texture');
  if (!textureElement) return;

  // 通过修改transform属性触发重绘
  textureElement.style.transform = 'translateZ(0)';
  // 短暂延迟后重置，避免影响正常样式
  setTimeout(() => {
    textureElement.style.transform = '';
  }, 10);
});

这个方法的原理是通过一个无视觉变化的样式修改，强制浏览器重新计算元素的渲染状态，从而恢复mix-blend-mode的效果。

3. 用动画强制持续重绘（慎用） #

如果上述方法无效，可以尝试给纹理元素添加一个无视觉变化的动画，让浏览器持续重绘该元素：

.texture {
  /* 原有样式保持不变 */
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: -10px; 
  mix-blend-mode: multiply; 
  user-select: none; 
  pointer-events: none; 
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAZoAMABAAAAAEAAAAZAAAAANoMEmUAAALiaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjU8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjI1PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Ch9KojkAAAN+SURBVEgNTdVpctswDAVgipGX2E6cNLn/ofqnPUXGS7wvKj626JgzNEXg4eEBpOTu18/fQ9d15fv7u1ifnp7KZDJpczwel+PxWC6XS+n7vtRayzAMZRtYvtVmXebzedntdg2zWCwa5nw+F+Pj46PF19vtVvb7feGQYDQaNSLPyK1fX19ls9mU6XTacBJJfr1eW/KXl5cigVhCcBr3+72cTqfSU/E4gKhUFTLDKgApMfaESWSqJquW4Pn5uSXjg++RIM42IZcdqRZ5RkIlQRJJDZdkh8PhfzvFGMglxF0ZBZgSIRf0qDTBKjARwOfZeU4MPm1mw9XsTVkE2iAHoBqRRCpZrVatLbPZ7G/bAuMMLqdzOe4PpYvSrudLOez2pZauLGbzMtzuzQdTJTGQy6w1EugxW6rKnsNowT1EaZ+WfX5+NpHi8KkC3lRZZdAm6pVv5XSlDYrf398biT2/6VB/hH0Cu92WG/LwX0OYdRTk0+DbBU8vgBoKXVGZJdM6NiJyr4LcexZnL6FBrErstXYbydvBZxLqnQsAcqDWlng2kOVlgH17e2v4fAUIZHcxnCEu3K+vr6WXHQGjnhoteygVpIoMkMSzGKvzYkuhbNRLzO4llbQCZACDhGzaJomqBPHZs7tx6/W6CbA3+PDAijHh8PVU59XVIioNK5DqMkhLEGVF8HkuYvIcVS+5tnluV1h2ZBySakNWR8lyuWz2x7bC+1B2gZ/Ftb/EgZ/CNg7STEyoM65+BMuoTalcIsoFaJVnSvmNUbQHSd4iHK47nmtU2zDBpwvVBomNICQC7A2rtpmeW7WBU+l4GpdiiE9HzHjjyj2+akO8JHg2cQGIxl0ZTMoRZUIHSZkvQPr5KDUlMXVCrOSqtsJJwGdUBiRWRk7/HarJM+JDaDWyWqszhG2V/WthcqbolgRQzyXwLFhrKExCvkzKrsI8Bz5X2tsuXqWEZrU1774knIa3WRKKEDhcayqElQRh4ogx8MGyZ6L2MgJTmV9kJFkJm3bCPCpNbH5IxajMdAvhVSxpRWZyphoKOO19JpStSuodLh9MElEuCbxzkNi75+vt8rRKgCRBAogEiFq+rFTb0g5LsQ6wmRLAaivh/HgrRdRR6nZxegagDolKBOdgg2FDLkZrrLDOlN/np7U4b0C2ipMj9wJzOhtfVpXC5PuTAqhGDM+X5/wHWO18ZrEZ4QIAAAAASUVORK5CYII=');

  /* 添加强制重绘的动画 */
  animation: forceRedraw 1s infinite linear;
}

@keyframes forceRedraw {
  0% { transform: translateZ(0); }
  100% { transform: translateZ(0); }
}

注意：这个方法可能会带来轻微的性能开销，只在其他方案都无效时使用。

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