关于Safari中-webkit-mask-box-image显示4组遮罩图的问题求助

算力阿峰

2026-7-22

Safari中-webkit-mask-box-image重复显示4组遮罩的解决方案

问题背景

在应用中使用-webkit-mask-box-image实现图标遮罩时，仅在Safari浏览器中出现遮罩图像重复显示4组的异常，Chrome浏览器表现正常。相关代码如下：

.fhr {
  --fhr-icon-size: 20px;
  &-shopping-bag {
    -webkit-mask-box-image: url("/icons/shopping-bag.svg");
  }
  background: var(--layout-color);
  height: var(--fhr-icon-size);
  width: var(--fhr-icon-size);
}

问题表现为遮罩图像在容器内以2x2网格形式重复显示4次。

问题原因

-webkit-mask-box-image是WebKit早期的私有属性，设计初衷是实现9宫格切片式的遮罩填充，如今已被标准CSS mask属性废弃。近期Safari对该旧属性的渲染逻辑进行了调整，导致原本预期的单张遮罩图像被强制分割重复填充。

修复方案

改用标准CSS遮罩属性替代废弃的私有属性，确保跨浏览器兼容性：

.fhr {
  --fhr-icon-size: 20px;
  &-shopping-bag {
    // 标准属性 + WebKit前缀兼容Safari
    mask-image: url("/icons/shopping-bag.svg");
    -webkit-mask-image: url("/icons/shopping-bag.svg");
    // 强制遮罩图像适配容器尺寸
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    // 禁止图像重复
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }
  background: var(--layout-color);
  height: var(--fhr-icon-size);
  width: var(--fhr-icon-size);
}