修复：-webkit-mask-box-image 以 4 组显示掩蔽图像

Question

我遇到问题 -webkit-mask-box-image 在 my application 上以 4 组显示掩蔽图像。这最近在 Safari 上开始，在 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);
}

通过从 CSS 中删除框和 WebKit 来修复，所以我只是让它们都说 mask-image，然后我设置大小并重复设置。