RESOLVED DUPLICATE of bug 230886 Bug 231796
REGRESSION (GPU Process):SVG images in canvas get blurred 
https://bugs.webkit.org/show_bug.cgi?id=231796
Summary REGRESSION (GPU Process):SVG images in canvas get blurred
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.