Bug 231796

Summary:

REGRESSION (GPU Process):SVG images in canvas get blurred

Product:

WebKit

Reporter:

Roman Nikitin <roman.n>

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Critical

CC:

dino, sabouhallawa, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Intel)

OS:

macOS 11

URL:

https://codepen.io/nikitindev/pen/GRvKmYo

Attachments:

Description	Flags
rendered svg in the chrome	none
rendered svg in the safari	none
Rendered svg in the safari without default experimental feature	none
Test case	none

Roman Nikitin

Reported 2021-10-14 22:50:37 PDT

Created attachment 441334 [details] rendered svg in the chrome Hi! We found the problem with drawing SVG images on canvas. It happens with the experimental flag "GPU Process: Canvas rendering" which is set up by default. Seems like the new version of Safari with this flag rasterizes SVG before applying canvas context transformation. An example is here https://codepen.io/nikitindev/pen/GRvKmYo This code works fine in the latest Chrome and in Safari 14 (with default settings), but in the Safari 15 rendered SVG gets blurred.

Attachments
rendered svg in the chrome (138.49 KB, image/png) 2021-10-14 22:50 PDT, Roman Nikitin	no flags	Details
rendered svg in the safari (691.06 KB, image/png) 2021-10-14 22:51 PDT, Roman Nikitin	no flags	Details
Rendered svg in the safari without default experimental feature (132.34 KB, image/png) 2021-10-14 23:15 PDT, Roman Nikitin	no flags	Details
Test case (2.69 KB, text/html) 2021-11-02 14:04 PDT, Said Abou-Hallawa	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Roman Nikitin

Comment 1 2021-10-14 22:51:12 PDT

Created attachment 441335 [details] rendered svg in the safari

Roman Nikitin

Comment 2 2021-10-14 22:57:41 PDT

A solution like setting up scaled sizes instead of scale context leads to performance problems. This bug is really important because we are making the canvas tool - the whiteboard Miro. We often use SVG and our users do face not quality content in Safari 15. Also, we think that all functions should work properly, without manual actions like the switching experimental flag.

Roman Nikitin

Comment 3 2021-10-14 23:15:51 PDT

Created attachment 441337 [details] Rendered svg in the safari without default experimental feature

Roman Nikitin

Comment 4 2021-10-14 23:46:34 PDT

This experimental flag breaks CSS transform scale3d too https://codepen.io/nikitindev/pen/ZEJbwNW

Sam Sneddon [:gsnedders]

Comment 5 2021-10-15 04:53:21 PDT

Probably a practically dupe of one of the other GPU canvas SVG drawImage regressions, but -> Simon to triage.

Roman Nikitin

Comment 6 2021-10-15 06:10:28 PDT

Seems like the problem with CSS transform doesn't link to the experimental flag (it doesn't work in Safari 14), so it's another bug. The main problem is rendering SVG on the canvas

Radar WebKit Bug Importer

Comment 7 2021-10-15 12:23:30 PDT

<rdar://problem/84312406>

Said Abou-Hallawa

Comment 8 2021-11-02 14:04:11 PDT

Created attachment 443131 [details] Test case I am attaching a test case which waits for data url image to be fully loaded before rendering it to the canvas.

Said Abou-Hallawa

Comment 9 2021-11-02 14:05:47 PDT

This was fixed by the fix of bug 230886. *** This bug has been marked as a duplicate of bug 230886 ***

Note You need to log in before you can comment on or make changes to this bug.