Safari浏览器中Swiper使用mix-blend-mode样式不生效问题咨询

问题原因 #

该问题是Safari与Chrome对跨合成层的mix-blend-mode渲染规则不一致导致的：
Swiper组件默认会给.swiper-wrapper、.swiper-slide元素添加transform: translate3d(0,0,0)属性开启硬件加速，该操作会让元素创建独立的合成层。Safari默认限制mix-blend-mode只能在当前合成层内部生效，无法和外层.block的背景颜色混合，因此出现Chrome运行正常、Safari失效的情况。

解决方案 #

提供两种可选方案，可根据业务场景选择：

方案1：调整Swiper配置，禁用3D变换 #

初始化Swiper时添加如下配置，关闭硬件加速的3D变换，改用2D变换实现滑动，避免生成多余合成层：

const swiper = new Swiper('.swiper', {
  // 保留原有其他配置
  useCSS3Transforms: false,
  // Swiper 8+版本可使用下面的配置替代
  // cssMode: true
})

该方案无hack逻辑，性能损耗极小，适合对滑动交互流畅度要求不高的场景。

方案2：添加CSS兼容hack，保留硬件加速能力 #

如果需要保留3D变换带来的流畅滑动效果，可给设置了mix-blend-mode的元素添加无视觉副作用的webkit前缀mask属性，强制Safari允许跨合成层应用混合模式，修改CSS代码如下：

.block {
  width: 400px;
}
.swiper {
  mix-blend-mode: luminosity;
  /* 新增Safari兼容代码 */
  -webkit-mask-image: linear-gradient(#000, #000);
}

该方案不影响滑动性能，兼容所有支持mix-blend-mode的Safari版本，无可见样式改动。

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