Bug 244199

Summary:

CanvasRenderingContext2D transformation matrix not respected on <video> element during drawImage()

Product:

WebKit

Reporter:

Matt Rossman <matt.rossman>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, eric.carlson, jer.noble, karlcow, sabouhallawa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
rendering in Safari, firefox, chrome	none

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>