添加transform3d后mix-blend-mode效果消失，如何修复？

你遇到的问题根源在于：transform: translate3d()会强制浏览器为文本元素创建独立的合成层，直接打破了mix-blend-mode依赖的渲染上下文——原本文本和图像处于同一渲染上下文，混合模式能根据两者的颜色差值计算出黑白切换效果；但新合成层把文本与图像的渲染隔离开，混合关系失效，自然看不到原本的效果。

给你两个可行的修复方案：

• 方案一：如果不需要硬件加速，直接删掉transform: translate3d(0px, 0px, 0px);，或者换成不会触发合成层的2D变换transform: translate(0px, 0px);，混合模式就能正常工作。
• 方案二：必须保留3D变换的话，把mix-blend-mode从文本元素移到包含文本和图像的共同父元素上。父元素会成为混合上下文，内部的文本和图像都在这个上下文里参与混合，即使文本因3D变换创建合成层，也不会脱离这个上下文，效果就能恢复。

举个代码调整的例子：
假设原结构是包含图像和文本的容器，原CSS给文本加了混合模式和3D变换，改成给容器加混合模式：

/* 原CSS */
.text {
  mix-blend-mode: difference;
  transform: translate3d(0, 0, 0);
}

/* 修改后CSS */
.container {
  mix-blend-mode: difference;
}
.text {
  transform: translate3d(0, 0, 0);
}

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