Bug 240304 – Vector images are blurred if zoomed with setTransform

• Component: Canvas
• Status: RESOLVED CONFIGURATION CHANGED

[Dmitriy Davydov]

Created attachment 459158 [details]
Zoomed SVG image rendering comparison between Chrome and Safari

Hello, I'm working at miro.com where we build a whiteboard for real time collaboration of multiple users.
We faced a problem with rendering of the vector images with Canvas API in Safari. 
Here is the demo page: https://codesandbox.io/s/festive-roentgen-upjfvg?file=/src/index.js
You can see that the image is blurred in Safari but if you open it in Chrome you'll see that the image looks sharp.
The problem appears after the image is zoomed using the CanvasRenderingContext2D.setTransform() method. This affects many of our users on iOS and macOS devices.
Please tell us what can we do to eliminate this blur effect?

[Radar WebKit Bug Importer]

<rdar://problem/93497556>

[Smoley]

Thanks for filing, This does not reproduce for me on the latest macOS beta build: macOS 12.5 beta (21G5027d) nor on Safari Technology Preview STP 145. Are you able to reproduce the blurring on either of those builds?

[Dmitriy Davydov]

Hi, thanks for checking it! I've just updated macOS to 12.2.1 (21D62) and the bug is not reproduced in Safari Version 15.3 (17612.4.9.1.8). Initially the bug was detected on Safari 15.1 (17612.2.9.1.20), so I suppose we can close this one.

[Simon Fraser (smfr)]

Thanks for checking.