Created attachment 371587 [details] Example of video in foreignObject in SVG that is rendered at incorrect location When a video is added as a <foreignObject> in an SVG, it is not rendered in the correct location if the element is translated. See the attachment. The video should be rendered over the top of the red rectangle. It is currently rendered to the left (as if it is ignoring the translation). Tested in Version 12.1.1 (13607.2.6.1.2)
Created attachment 371590 [details] Workaround
A workaround is to ensure that the SVG is not scaled (i.e. the width and height of the SVG in pixels matches exactly the width and height of the viewBox) and that the viewBox coordinates are at (0,0). It is then possible to take the foreignObject, move it to the root of the SVG, and give it x and y coordinates that are the same as any background objects after translation. Because the SVG has not been scaled, the video's width and height attributes then behave acceptably. See the attached example.
<rdar://problem/51533362>
This is the same as https://bugs.webkit.org/show_bug.cgi?id=32218 *** This bug has been marked as a duplicate of bug 23113 ***