mix-blend-mode: multiply在Safari失效，其他浏览器正常的问题求助

问题根源 #

Safari对mix-blend-mode的渲染逻辑和其他浏览器存在差异：当使用该属性的绝对定位元素，其父元素未设置背景色或未创建有效堆叠上下文时，混合效果无法正确作用于下方的图片元素，导致失效。

修复方案 #

针对你的代码，可通过以下两种调整解决问题：

方案1：给父元素添加背景色并创建堆叠上下文

给.slider添加背景色（与h1背景色一致即可）和z-index属性，为混合效果提供明确的基准上下文：

.slider {
    min-width: 50vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4ch;
    position: relative;
    background: #0c0d0e; /* 添加背景色，为混合提供基准 */
    z-index: 0; /* 创建堆叠上下文，限制混合范围 */
}

.slider h1 {
    background: #0c0d0e;
    text-align: center;
    font-size: 52vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
}

方案2：使用isolation属性隔离上下文

如果不需要父元素有可见背景，可给.slider添加isolation: isolate，确保混合效果仅作用于父元素内部的子元素：

.slider {
    min-width: 50vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4ch;
    position: relative;
    isolation: isolate; /* 隔离上下文，限定混合范围 */
}

.slider h1 {
    /* 原有样式不变 */
    background: #0c0d0e;
    text-align: center;
    font-size: 52vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
}

原理说明 #

Safari要求mix-blend-mode元素必须有明确的混合参照上下文。通过给父元素添加背景或隔离上下文，可让h1的混合效果正确作用于下方的图片，而非默认的文档根背景，从而解决跨浏览器兼容性问题。

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