MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿

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>

解决方案

  1. 升级 Chrome。
  2. 蒙层图片,使用 png 替换 svg。

您的赞助将会支持作者创作及本站运维

发表评论


TOP