Bug 240304

Summary:

Vector images are blurred if zoomed with setTransform

Product:

WebKit

Reporter:

Dmitriy Davydov <dmitrii.d>

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

dino, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

All

OS:

All

See Also:

https://bugs.webkit.org/show_bug.cgi?id=183715

Attachments:

Description	Flags
Zoomed SVG image rendering comparison between Chrome and Safari	none

Description Dmitriy Davydov 2022-05-11 05:45:39 PDT

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?

Comment 1 Radar WebKit Bug Importer 2022-05-18 05:46:21 PDT

<rdar://problem/93497556>

Comment 2 Smoley 2022-05-19 09:54:08 PDT

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?

Comment 3 Dmitriy Davydov 2022-05-22 02:44:43 PDT

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.

Comment 4 Simon Fraser (smfr) 2022-05-23 11:03:07 PDT

Thanks for checking.