Safari中SVG遮罩应用于SVG图标时边缘模糊问题排查求助

问题现象 #

• 在Safari浏览器中为SVG图标应用SVG遮罩时，会出现边缘模糊的情况，但Chrome浏览器无此问题
• 该问题并非持续出现：
  • 对页面无关部分进行随机修改可能“修复”此bug
  • 修改后刷新页面，bug会随机消失或重现；复制标签页、手动打开新标签页或开启隐私窗口时也可能触发状态切换，推测该问题与缓存机制有关

测试环境 #

已在桌面端Safari 15.6.1、16.4版本，以及多款苹果移动设备的WebView中测试该问题。

效果对比 #

实际效果（边缘模糊）：

预期效果（边缘清晰）：

复现代码 #

<html>
<head>
    <style>
    .logo {
        width: 96px;
        height: 96px;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image:
            url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PG1hc2sgaWQ9ImEiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTQ4IDI0YzAgMTkuMjA1LTQuNzk1IDI0LTI0IDI0UzAgNDMuMjA1IDAgMjQgNC43OTUgMCAyNCAwczI0IDQuNzk1IDI0IDI0eiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCAwaDQ4djQ4SDB6Ii8+PC9nPjwvc3ZnPg==);
        mask-image:
            url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PG1hc2sgaWQ9ImEiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTQ4IDI0YzAgMTkuMjA1LTQuNzk1IDI0LTI0IDI0UzAgNDMuMjA1IDAgMjQgNC43OTUgMCAyNCAwczI0IDQuNzk1IDI0IDI0eiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMCAwaDQ4djQ4SDB6Ii8+PC9nPjwvc3ZnPg==);
        background-image:
            url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTAgMGgyMHYyMEgweiIvPjwvc3ZnPg==);
            background-size: cover;
    }
    </style>
</head>
<body>
    <div class="logo"/>
</body>
</html>

相关SVG文件 #

1. 遮罩SVG：

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_16513_8424" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
<path d="M48 24C48 43.2052 43.2052 48 24 48C4.79475 48 0 43.2052 0 24C0 4.79475 4.79475 0 24 0C43.2052 0 48 4.79475 48 24Z" fill="white"/>
</mask>
<g mask="url(#mask0_16513_8424)">
<rect width="48" height="48" fill="black"/>
</g>
<defs>
</defs>
</svg>

2. 图标SVG：

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" fill="#000000"/>
</svg>

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