使用过滤器时如何防止Safari浏览器上的像素化​​？

Question

在下面的演示中，我在 Safari 中看到通过应用

svg { filter: blur(0); /* even with no-op filter */ }

这种情况只发生在 Safari 中，而不发生在 Chrome 中

#scene {
   filter: blur(0); /* even with no-op filter */
   transform-origin: 0 0;
   transform: scale(6);
}

<div id="scene">
  hello
</div>

如何在保持 SVG 上的投影的同时防止像素化？

Answer 1

这是因为 Safari 正在优化规模并在 GPU 上进行转换。您想阻止 Safari 执行此操作并强制它在 CPU 上重新渲染（这会降低电源效率。）

您要更改的函数很可能是 panzoom.js 中的这个函数

  function applyTransform(transform) {
    svgElement.setAttribute('transform', 'matrix(' +
      transform.scale + ' 0 0 ' +
      transform.scale + ' ' +
      transform.x + ' ' + transform.y + ')')
  }

您想在此处添加另一个属性以启动 Safari 重新渲染。您可能必须尝试添加诸如 enable-background: new 或 shape-rendering:geometricPrecision 之类的属性，以查看可能有效的方法。注意 - 您可能需要进行大量实验，并且无法保证任何有效的方法都会继续有效。