Bug 244199

Summary: CanvasRenderingContext2D transformation matrix not respected on <video> element during drawImage()
Product: WebKit Reporter: Matt Rossman <matt.rossman>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, eric.carlson, jer.noble, karlcow, sabouhallawa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
Attachments:
Description Flags
rendering in Safari, firefox, chrome none

Matt Rossman
Reported 2022-08-22 05:42:22 PDT
See these two examples: * Mirroring a <canvas> https://jsfiddle.net/mattrossman/kofev2hn/1/ * Mirroring a <video> https://jsfiddle.net/mattrossman/z5scnhg9/4/ Both demos apply horizontal mirroring to the destination canvas via `.setTransform(-1, 0, 0, 1, 0, 0)` and draw to the canvas with `.drawImage()`. The first demo correctly mirrors the input image (left) in major browsers (Safari 15.6, Chrome 104.0.5112.101, Firefox 103.0.2). The second demo mirrors the input video in Chrome and Firefox, whereas Safari displays the un-mirrored video.
Attachments
rendering in Safari, firefox, chrome (482.04 KB, image/jpeg)
2022-08-22 23:40 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2022-08-22 23:40:56 PDT
Created attachment 461815 [details] rendering in Safari, firefox, chrome Safari 16.1 Firefox Nightly 105.0a1 Google Chrome Canary 107.0.5255.0 This seems to be working for me in latest version of Safari on macOS Ventura.
Karl Dubost
Comment 2 2022-08-22 23:52:25 PDT
Matt, what is the result on Safari Technical Preview 151? It should be fixed in there. That was probably fixed by Bug 239113. Thanks for the report.
Radar WebKit Bug Importer
Comment 3 2022-08-29 05:43:15 PDT
<rdar://problem/99273596>
Note You need to log in before you can comment on or make changes to this bug.