Safari中内联元素CSS mask-image外背景色可见问题

问题描述 #

在Safari浏览器中，内联元素使用CSS mask-image时，背景色会在遮罩图像外部可见，该问题仅发生在内联元素上，如何同时遮罩外部区域？

效果对比 #

Chrome 正常显示效果 #

Safari 异常显示效果 #

原始代码 #

CSS代码 #

p {
  font-family: "Arial";
  line-height: 1.5;
  font-size: 3em;
}

.iconlink {
  color: #ff00000;
}

.iconlink::before {
    content: "";
    display: inline;
    mask-image: url('https://mdn.github.io/css-examples/masking/star.svg');
    -webkit-mask-image: url('https://mdn.github.io/css-examples/masking/star.svg');
    mask-size: 1em;
    -webkit-mask-size: 1em;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center left;
    -webkit-mask-mask-position: center left;
    background-color: #ff0000;
    padding-right: 1.5em;
    vertical-align: baseline;
}

HTML代码 #

<p>
this is an <a href="#" class="iconlink">iconlink</a>.
</p>

修复方案 #

这个问题源于Safari对内联元素的mask渲染逻辑与Chrome不一致，可通过以下方式解决：

• 将伪元素改为inline-block并设置宽高
  把伪元素的display: inline替换为display: inline-block，同时设置和遮罩尺寸匹配的宽高，用margin替代padding控制间距，让背景色被限制在元素范围内，遮罩就能完全覆盖：

  .iconlink::before {
      content: "";
      display: inline-block;
      width: 1em;
      height: 1em;
      mask-image: url('https://mdn.github.io/css-examples/masking/star.svg');
      -webkit-mask-image: url('https://mdn.github.io/css-examples/masking/star.svg');
      mask-size: 100% 100%;
      -webkit-mask-size: 100% 100%;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      background-color: #ff0000;
      margin-right: 0.5em;
      vertical-align: baseline;
  }
  

• 修正原代码笔误
  原代码存在两处错误：

  1. .iconlink的color值多了一个0，应为#ff0000
  2. -webkit-mask-mask-position是无效属性，正确属性为-webkit-mask-position

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