MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿。
背景介绍
MacOS 升级最新版的 Sonoma 之后，通过 CSS 蒙层实现的样式，如果使用了 svg 会出现边缘锯齿。具体表现如下图：
这个现象在低版本 Chrome 会出现（106.0.5226.0（正式版本）canary (arm64)）。
如果使用较新版本的 Chrome（118.0.5993.96（正式版本） (arm64)），就会表现正常：
代码实现非常简单，有一个设置了背景的 div，然后通过 mask-image 属性添加一个蒙层。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mask</title>
<style>
div {
width: 32px;
height: 32px;
background: #cf2e2e;
background-size: contain;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 0, 100 C 0, 23 23, 0 100, 0 S 200, 23 200, 100 177, 200 100, 200 0, 177 0, 100" fill="white"></path></svg>');
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们如果把蒙层使用的 svg 图片替换为 png，这个现象也会消失，比较代码如图下（预览代码）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mask</title>
<style>
.div-2 {
width: 32px;
height: 32px;
background: #cf2e2e;
background-size: contain;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 0, 100 C 0, 23 23, 0 100, 0 S 200, 23 200, 100 177, 200 100, 200 0, 177 0, 100" fill="white"></path></svg>');
-webkit-mask-size: 100% 100%;
}
.div-2 {
width: 32px;
height: 32px;
background: #cf2e2e;
background-size: contain;
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAADnRSTlMAvxBw388ggO+vn49gQGm7esQAAAECSURBVEjHYoADpjvVgiLvgMBRcPtZBQZ0wGbp9w4JPJmcgCqvHPcODTw1QpbPeocFLEPIs/dhU/DCAO48uXdYwUOYU1Xf4QBBUAPicCl4CjGC8R1OIABWYIdbwWNwEPXhVvACFFxc7/CABUAFevgUPII4Ab8j4vApeAp04zu8IIGBGb8CAwZO/AomMLDgV+AA8iV+f97Dr+Atwzn8Ct4w1OFX8JxhH34Frxnk8Ct4SAUFfvgVPGF4RwCMFAWAXuugBgAYhmFgpPIu9kC4XyhssV091OCzOBhOjqPl7AkO0SO8xJ8CkYIoMWvQIrWK85C5cuCgOEmOWg5ZRFiRZsad50EBNdtwSxnN3TIAAAAASUVORK5CYII=');
-webkit-mask-size: 100% 100%;
}
</style>
</head>
<body>
<div>MacOS Sonoma 低版本 Chrome，CSS mask-image 属性使用 svg 出现边缘锯齿。</div>
<div class="div-1"></div>
<div>如果将蒙层中使用的 svg 替换为 png，边缘锯齿消失：</div>
<div class="div-2"></div>
</body>
</html>
解决方案
- 升级 Chrome。
- 蒙层图片，使用 png 替换 svg。
您的赞助将会支持作者创作及本站运维
发表评论