CSS mask-composite 在 Safari 和 Firefox 结果不同怎么办

Safari 与 Firefox 的多层遮罩不一致时，先不要把 mask-composite 和 -webkit-mask-composite 当成同一属性的两种拼写。优先使用标准属性；确实要兼容不支持标准语法的旧环境，再放入独立回退分支。同时核对遮罩层顺序、组合值列表，以及后续简写是否重置了设置。

例如一个双色装饰块，希望两张遮罩重叠处透明、其余部分保留。如果把标准的 exclude 直接写进 WebKit 旧属性，或者将旧属性的 xor 写进标准属性，浏览器可能忽略声明，最后看到的就不是预期效果。

先把两套合成语法分开

标准 mask-composite 已有跨浏览器支持，不能再笼统地认为 Safari 只能使用前缀。实际项目仍须按目标版本决定兼容范围。旧 WebKit 属性是非标准扩展，使用另一组 Porter-Duff 运算关键字；两套列表不能原样互换。

标准规范地址：https://drafts.csswg.org/css-masking-1/

两层遮罩也需要明确源层和下层

标准模型中的当前遮罩层是 source，下方已合成遮罩是 destination。列表中的组合值按位置对应遮罩图像；值不足时重复使用，超出的值被忽略。最底层没有更下方遮罩，标准模型不把它按普通双层运算处理。遮罩组与元素内容隔离，运算不是在背景颜色和页面背后内容之间进行。

旧 WebKit 属性的文档指出，其遮罩合成顺序与声明图像顺序相反。这在不对称的减法和三层以上混合操作中尤其重要。即使两层非重叠运算看起来一致，也不能推导出所有多层组合都只需把 exclude 换成 xor。

先用标准两层写法固定预期

下面是原创的两层渐变示例，用于把合成问题从图片加载问题中分离出来，不涉及图片资源制作。两层分别给出垂直与水平的实心区域，exclude 的预期是重叠区域不保留、仅单层覆盖的区域保留。代码只是读者的复现输入，没有伪造 Safari 或 Firefox 的实测结果。

.mask-patch {
  width: 176px;
  height: 128px;
  background: #287d89;

  /* 先定义两层遮罩，再设置合成，避免简写在后面重置运算 */
  mask-image:
    linear-gradient(to right, #000 58%, transparent 58%),
    linear-gradient(to bottom, #000 42%, transparent 42%);
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-repeat: no-repeat;

  /* 两层的非重叠区域保留，重叠区域不保留 */
  mask-composite: exclude;
}

这一最小写法不混用前缀。若两端都支持标准 exclude，先对照这一份样式；不要为 Safari 单独添加一串旧属性后，又把新旧声明交错覆盖。

只为不支持标准的环境增加旧分支

如果项目仍覆盖只支持 WebKit 旧语法的环境，可把前缀声明限定在“标准 exclude 不被支持，旧 xor 被支持”的条件里。两层回退给底层显式保留 source-over，避免将同一个 xor 无差别重复到全部旧层。这里仅处理上述两层非重叠案例，不承诺任意复杂遮罩等价。

/* 标准可用时完全跳过旧分支，不依赖浏览器名字做判断 */
@supports not (mask-composite: exclude) {
  @supports (-webkit-mask-composite: xor) {
    .mask-patch {
      /* 旧分支独立给出同样的图像与几何设置 */
      -webkit-mask-image:
        linear-gradient(to right, #000 58%, transparent 58%),
        linear-gradient(to bottom, #000 42%, transparent 42%);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-position: 0 0;
      -webkit-mask-repeat: no-repeat;

      /* 限定两层用途：非重叠组合，底层保留 */
      -webkit-mask-composite: xor, source-over;
    }
  }
}

@supports 判断语法支持，不是逐像素一致性证明。如果需要兼容非常旧的浏览器，还要在真实目标版本确认条件规则本身是否可用。对于必要内容，最好采用不依赖遮罩的普通布局；装饰效果可退回普通色块或边框。

结果仍不一致时检查重置和输入

先暂时移走第三层及额外运算，把问题缩到两层，再逐项恢复。重点检查下面四件事：

• 简写位置：后面的 mask 简写可能重置 mask-composite 等子属性。把最终合成长属性放在相应简写之后，并看最终计算值。
• 列表对应：none 也会占据遮罩层位置。mask-image 改成三项而组合值只有一项，会发生值重复，不能把它看作只对第一层生效。
• 输入模式：alpha 与 luminance 的遮罩含义不同，不要把模式差异误认为组合运算失效。
• 几何范围：尺寸、位置、重复设置或不同区域框会改变重叠范围。两端输入区域不相同，就无法单独比较 composite。

如果只有半透明边缘不同，也应把输入透明度与像素边缘纳入判断。运算符解释区域关系，但并不保证不同渲染环境的边缘像素完全一致。

把升级决策建立在实际目标版本上

记录浏览器及系统版本，并让读者在自己的目标环境比较：只用标准属性、只进入旧回退、加入第三层、交换两层顺序四种案例。对 subtract 一类方向敏感运算尤其要单独检查。这里提供的是复现方法，本文没有运行浏览器测试或截取软件页面。

是不是把标准声明放最后就一定一致？

不是。声明顺序只能解决一部分层叠问题，不能替代输入、运算方向和目标版本判断。优先用条件分支减少新旧属性同时参与的机会。

exclude 和 xor 能在所有情况下直接替换吗？

不能这样概括。本文回退针对两层非重叠区域；多层混合、不透明度和底层处理要按旧语法模型逐项确认。

为何一个合成值会影响多层？

标准组合列表不足时会重复匹配遮罩层。明确写出需要的列表，减少加入新层后的意外语义变化。

参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-composite；https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-mask-composite。