使用CSS mask为何出现随机图形毛刺？Div边缘异常技术咨询

问题重现 #

在Windows 11的Chrome浏览器里，用CSS mask实现的.section-marker元素，按住ctrl键滚动调整页面缩放比例时，左右边缘会随机出现1px宽的垂直毛刺。

问题代码 #

CSS

.section-marker {
    width: 200px;
    height: 32px;
    background: blue;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' style='background:white'/%3E") luminance left / auto 100% no-repeat subtract,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='10' height='20' fill='black'/%3E%3Cpath d='M 0,0 10,10 0,20 Z' fill='white'/%3E%3C/svg%3E") luminance left / auto 100% no-repeat,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='20'%3E%3Crect width='35' height='20' fill='white'/%3E%3Cpath d='M 0,20 10,10 0,0 Z M 10,0 20,10 10,20 H 25 L 35,10 25,0 Z' fill='black'/%3E%3C/svg%3E%0A") luminance right / auto 100% no-repeat;
}

HTML

<div class="section-marker"></div>

原因分析 #

这是Chrome处理SVG-based CSS mask时的像素对齐精度问题——当页面缩放后，元素或mask的尺寸、定位计算出现小数像素，浏览器的渲染逻辑会产生这类1px的边缘瑕疵。

修复方案 #

方案1：给mask添加微小偏移，避开模糊像素位

给左右mask的定位添加0.5px偏移，让边缘对齐到更清晰的像素边界：

.section-marker {
    width: 200px;
    height: 32px;
    background: blue;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' style='background:white'/%3E") luminance left 0.5px / auto 100% no-repeat subtract,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='10' height='20' fill='black'/%3E%3Cpath d='M 0,0 10,10 0,20 Z' fill='white'/%3E%3C/svg%3E") luminance left 0.5px / auto 100% no-repeat,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='20'%3E%3Crect width='35' height='20' fill='white'/%3E%3Cpath d='M 0,20 10,10 0,0 Z M 10,0 20,10 10,20 H 25 L 35,10 25,0 Z' fill='black'/%3E%3C/svg%3E%0A") luminance right 0.5px / auto 100% no-repeat;
}

方案2：添加GPU加速属性，强化像素对齐

用transform: translateZ(0)触发GPU渲染，配合backface-visibility: hidden帮助浏览器更精准处理像素：

.section-marker {
    width: 200px;
    height: 32px;
    background: blue;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' style='background:white'/%3E") luminance left / auto 100% no-repeat subtract,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='10' height='20' fill='black'/%3E%3Cpath d='M 0,0 10,10 0,20 Z' fill='white'/%3E%3C/svg%3E") luminance left / auto 100% no-repeat,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='20'%3E%3Crect width='35' height='20' fill='white'/%3E%3Cpath d='M 0,20 10,10 0,0 Z M 10,0 20,10 10,20 H 25 L 35,10 25,0 Z' fill='black'/%3E%3C/svg%3E%0A") luminance right / auto 100% no-repeat;
    transform: translateZ(0);
    backface-visibility: hidden;
}

方案3：匹配SVG与元素尺寸，避免拉伸偏差

原SVG mask的高度是20px，而元素高度是32px，非整数比例拉伸容易导致精度问题。把SVG高度改成32px，重新生成路径：

.section-marker {
    width: 200px;
    height: 32px;
    background: blue;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' style='background:white'/%3E") luminance left / auto 100% no-repeat subtract,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='32'%3E%3Crect width='10' height='32' fill='black'/%3E%3Cpath d='M 0,0 10,16 0,32 Z' fill='white'/%3E%3C/svg%3E") luminance left / auto 100% no-repeat,
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='32'%3E%3Crect width='35' height='32' fill='white'/%3E%3Cpath d='M 0,32 10,16 0,0 Z M 10,0 20,16 10,32 H 25 L 35,16 25,0 Z' fill='black'/%3E%3C/svg%3E") luminance right / auto 100% no-repeat;
}

这个方案从根源上解决问题，因为mask无需拉伸，渲染精度更高。

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