使用mix-blend-mode:difference时，如何实现兼容Safari的灰度效果？

使用mix-blend-mode: difference时，能否通过CSS或JS添加灰度/单色效果？

当前我们的实现通过切换mix-blend-mode: color元素的显示状态模拟灰度效果（按G键切换），多数浏览器表现正常，但在Safari中失效，文本显示为黑色。求兼容的替代方案。

当前实现代码 #

HTML #

<div class="container relative">
  <span class="difference fixed">Fixed – </span>
  <span class="color fixed toggle">Fixed – </span>
  <span class="difference absolute">Absolute – </span>
  <span class="color absolute toggle">Absolute – </span>
</div>

CSS #

* {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  margin: 0;
}

.container {
  background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(66,165,207,1) 17%, rgba(203,136,66,1) 48%, rgba(187,76,85,1) 72%, rgba(70,252,154,1) 100%);
  height: 100vh;
  width: 100vw;
}

.fixed {
  font-size: 5rem;
  position: fixed;
  font-family: sans-serif;
}

.absolute {
  font-size: 5rem;
  position: absolute;
  top: 4rem;
  font-family: sans-serif;
}

.difference {
  color: white;
  mix-blend-mode: difference;
}

.color {
  color: white;
  mix-blend-mode: color;
  z-index: 1;
}

.toggle {
  display: none;
}
img {
  position: absolute;
  width: 100%;
  height: 100%;
}

JavaScript #

let grayscale = true
window.addEventListener("keydown", (e) => {
    if (e.metaKey) return;
    switch (e.keyCode) {
        case 71: // G
            if (grayscale) {
                document.querySelectorAll('.color').forEach(el => el.classList.remove('toggle'))
            } else {
                document.querySelectorAll('.color').forEach(el => el.classList.add('toggle'))
            }
            grayscale = !grayscale
            break;
        default:
            break;
    }
});

兼容Safari的替代方案 #

方案1：替换混合模式类型 #

将原方案中.color类的mix-blend-mode: color改为mix-blend-mode: luminosity，即可解决Safari中文本变黑的问题，无需大幅改动代码：

.color {
  color: white;
  mix-blend-mode: luminosity; /* 替换原color值 */
  z-index: 1;
}

luminosity混合模式在Safari中对文本的渲染更稳定，能正确呈现灰度效果。

方案2：使用滤镜+混合模式嵌套 #

移除重复的文本元素，给容器添加灰度滤镜，内部文本保持difference混合模式，结构更简洁：

.grayscale-active {
  filter: grayscale(1);
}
.difference {
  color: white;
  mix-blend-mode: difference;
}

修改JS逻辑，切换容器的类：

let grayscale = true
window.addEventListener("keydown", (e) => {
    if (e.metaKey || e.keyCode !== 71) return;
    document.querySelector('.container').classList.toggle('grayscale-active');
    grayscale = !grayscale;
});

同时删除HTML中所有.color类的元素。

方案3：伪元素叠加灰度层 #

给文本元素添加伪元素，通过混合模式实现灰度效果，无需额外DOM元素：

.difference {
  color: white;
  mix-blend-mode: difference;
  position: relative; /* 新增相对定位 */
}
.difference.grayscale::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  mix-blend-mode: luminosity;
  pointer-events: none; /* 不干扰交互 */
}

JS逻辑改为切换文本元素的grayscale类：

let grayscale = true
window.addEventListener("keydown", (e) => {
    if (e.metaKey || e.keyCode !== 71) return;
    document.querySelectorAll('.difference').forEach(el => el.classList.toggle('grayscale'));
    grayscale = !grayscale;
});

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