CSS mask与mask-composite在Safari 14中失效，求兼容解决方案

问题分析 #

Safari 14 既不支持标准的 mask-composite 属性，其带前缀的 -webkit-mask-composite 也采用旧版 Porter-Duff 语法，和标准语法逻辑不兼容。你当前的 @supports 检测条件无法匹配 Safari 14，导致适配代码不生效。

最优兼容方案：移除 mask-composite 依赖 #

你的需求是在遮罩层顶部/底部保留两个圆形透明区域，其实不需要依赖 mask-composite，直接通过多个径向渐变叠加即可实现相同效果，且天然兼容 Safari 14：

.hundred_top {
    pointer-events: none;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
    -webkit-mask:
        radial-gradient(circle at 25% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% bottom, transparent 31.6%, black 31.6%);
    mask:
        radial-gradient(circle at 25% bottom, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% bottom, transparent 31.6%, black 31.6%);
}

.hundred_bottom {
    pointer-events: none;
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
    -webkit-mask:
        radial-gradient(circle at 25% top, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% top, transparent 31.6%, black 31.6%);
    mask:
        radial-gradient(circle at 25% top, transparent 31.6%, black 31.6%),
        radial-gradient(circle at 75% top, transparent 31.6%, black 31.6%);
}

方案原理 #

两个径向渐变层叠加后，各自的透明圆形区域会保留，其余区域被黑色覆盖，最终实现「遮罩层仅两个圆形区域透明，其余为黑色」的效果，和你原代码的视觉表现完全一致，同时避免了对 mask-composite 的依赖，完美兼容 Safari 14 及以上版本。

备选方案：适配旧版 -webkit-mask-composite（不推荐） #

如果你坚持使用 mask-composite，可以针对 Safari 14 添加旧版语法的前缀属性（注意旧版语法逻辑和标准不同）：

.hundred_top,
.hundred_bottom {
    mask-composite: exclude;
    /* 旧版 WebKit 语法，对应标准的 exclude 逻辑 */
    -webkit-mask-composite: xor;
}

但该方案需要精确匹配旧版语法的逻辑，不如移除 mask-composite 的方案简洁可靠。

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