解决 css mask 属性未请求图片的问题

在使用 css mask 属性时，指定了图片地址，但网络面板显示未请求获取该图片，这可能是由于浏览器兼容性问题造成的。

问题

如下代码所示：

立即学习“前端免费学习笔记（深入）”；

<button>
  icon <span data-icon="cloud"></span>
</button>

[data-icon="cloud"] {
  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center /
  contain no-repeat;
  mask: var(--icon-cloud);
  inline-size: 1rem;
  block-size: 1rem;
}

button {
  appearance: none;
  border: 0;
  padding-inline: 1.5ch;
  padding-block: 1ch;
  display: inline-flex;
}

使用该代码时，网络面板中并未显示对 "https://api.iconify.design/mdi:apple-icloud.svg" 的请求。

解决方案

此问题可能是由于浏览器版本较低造成的。更新到最新版本的 firefox 即可解决该问题。