如何移除带有SVG背景的按钮右侧竖线（仅Chrome桌面版90.0.4430.93出现该问题）

我遇到过类似的Chrome专属mask渲染bug，结合你的代码和描述，大概率是WebKit内核对-webkit-mask属性的边缘处理不够严谨导致的（Firefox用的是Gecko内核，渲染逻辑不同所以没这个问题）。给你几个可行的解决方案，按推荐优先级排序：

方案一：完善mask的定位与尺寸属性 #

Chrome经常会因为mask没有明确的尺寸和定位设置，导致SVG被异常拉伸或边缘溢出，出现多余线条。我们可以给mask补充定位、缩放规则，同时添加标准mask属性兼容现代浏览器：

.btn-primary.btn-arrow-right, 
.btn-primary.btn-arrow-right:not(:disabled):not(.disabled):not(:focus):active, 
.btn-primary.btn-arrow-right:not(:disabled):not(.disabled):not(:focus).active {
    background-color: #ff1c32;
    /* 补充定位、缩放规则，确保SVG按比例适配按钮 */
    -webkit-mask: url("/static/speedy-match/images/btn-arrow-right.svg") no-repeat right center / contain;
    /* 添加标准mask属性，兼容非webkit内核浏览器 */
    mask: url("/static/speedy-match/images/btn-arrow-right.svg") no-repeat right center / contain;
    border: transparent;
    padding-right: 3em;
}

这里的right center确保SVG在按钮右侧居中，contain让SVG按自身比例缩放，不会超出按钮边界，从根源上避免边缘溢出的线条。

方案二：用background-image替代mask（适合单色背景场景） #

因为你的按钮背景色是固定的#ff1c32，可以换一种实现思路：把SVG改成白色箭头（纯色），然后作为背景图和红色背景搭配，完全避开mask的渲染问题。如果原SVG是用于mask的（箭头区域透明、其余不透明），只需要重新导出一份白色箭头的SVG即可：

.btn-primary.btn-arrow-right, 
.btn-primary.btn-arrow-right:not(:disabled):not(.disabled):not(:focus):active, 
.btn-primary.btn-arrow-right:not(:disabled):not(.disabled):not(:focus).active {
    background-color: #ff1c32;
    background-image: url("/static/speedy-match/images/btn-arrow-right-white.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%; /* 根据按钮大小调整比例 */
    border: transparent;
    padding-right: 3em;
}

这种实现方式兼容性更好，几乎不会出现浏览器渲染差异。

方案三：添加overflow:hidden裁剪多余区域 #

如果上面的方案都没效果，可以尝试给按钮添加overflow:hidden，强制裁剪掉按钮边界外的渲染内容，把多余的竖线隐藏：

.btn-primary.btn-arrow-right, 
.btn-primary.btn-arrow-right:not(:disabled):not(.disabled):not(:focus):active, 
.btn-primary.btn-arrow-right:not(:disabled):not(.disabled):not(:focus).active {
    background-color: #ff1c32;
    -webkit-mask: url("/static/speedy-match/images/btn-arrow-right.svg") no-repeat;
    mask: url("/static/speedy-match/images/btn-arrow-right.svg") no-repeat;
    border: transparent;
    padding-right: 3em;
    overflow: hidden; /* 新增裁剪规则 */
}

优先试试方案一，它不需要修改SVG文件，也不改变原有实现逻辑，大概率能解决问题。如果还是不行，再尝试方案三或方案二。

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