Issue: Blurred svg image after zoom.

[dendrofen]

Source

On ios, mac os. After scaling the svg it looks like the svg is converted to png (probably the browser engine does it under the bonnet) and becomes blurry.

Investigation

After some tests, I found that switching css translate3d -> to translate (2d) fixes the blurring problem.
Strange problem, maybe it's related to the graphic card or browser, but using translate instead of translate3d solves the problem.

Potential solution

• replace translate3d with translate

[dendrofen]

Here is some quite old topic similar issue
https://stackoverflow.com/questions/45588937/icon-font-blur-in-chrome-when-using-transform-translate3d?rq=1

and a comment under this topic, which might be a true...

Since using 3D transform offloads things to the GPU so that the browser uses hardware compositing, it improves performance: perhaps that is the reason why the plugin authors used transform3d even though it is not being translated/moved in the z-axis.