使用过滤器时如何防止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之类的属性，以查看可能的效果。注意-您可能必须进行大量试验，并且不能保证任何工作都将继续起作用。