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.
Created attachment 441335 [details] rendered svg in the safari
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.
Created attachment 441337 [details] Rendered svg in the safari without default experimental feature
This experimental flag breaks CSS transform scale3d too https://codepen.io/nikitindev/pen/ZEJbwNW
Probably a practically dupe of one of the other GPU canvas SVG drawImage regressions, but -> Simon to triage.
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
<rdar://problem/84312406>
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.
This was fixed by the fix of bug 230886. *** This bug has been marked as a duplicate of bug 230886 ***