使用-webkit-mask-size:contain时，如何解决Safari中图标被裁切的问题？

问题现象 #

将SVG图标作为遮罩使用时，Safari浏览器有时会出现遮罩单边或多边被裁切的异常。这类问题通常出现在用相对单位设置元素尺寸的场景下，且仅在特定尺寸阈值时触发，临时调整视口大小可暂时恢复正常。推测这是浏览器计算尺寸或宽高比时的舍入误差导致的。

触发与恢复特征 #

固定尺寸场景下可复现该问题：鼠标悬停在渲染后的图标上时，原本被裁切的底部和左侧边缘会恢复正常——这是通过将-webkit-mask-size从contain切换为固定尺寸实现的。

临时方案的局限 #

用固定尺寸作为-webkit-mask-size的值是可行的临时解决方案，但很多实际场景中必须依赖contain属性适配不同布局需求，这种情况下该方案无法适用。

注意：该问题在Chrome中偶有出现，但当前简化案例无法复现此问题。

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