Bug 244199 - CanvasRenderingContext2D transformation matrix not respected on <video> element during drawImage()
Summary: CanvasRenderingContext2D transformation matrix not respected on <video> eleme...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-08-22 05:42 PDT by Matt Rossman
Modified: 2022-08-29 05:43 PDT (History)
8 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Rossman 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.
Comment 1 Karl Dubost 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.
Comment 2 Karl Dubost 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.
Comment 3 Radar WebKit Bug Importer 2022-08-29 05:43:15 PDT 
<rdar://problem/99273596>