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

Description Roman Nikitin 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.

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

Created attachment 441335 [details]
rendered svg in the safari

Comment 2 Roman Nikitin 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.

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

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

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

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

Comment 5 Sam Sneddon [:gsnedders] 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.

Comment 6 Roman Nikitin 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

Comment 7 Radar WebKit Bug Importer 2021-10-15 12:23:30 PDT

<rdar://problem/84312406>

Comment 8 Said Abou-Hallawa 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.

Comment 9 Said Abou-Hallawa 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 ***