Bug 198660 - Video in SVG foreignObject is not translated correctly
Summary: Video in SVG foreignObject is not translated correctly
Status: RESOLVED DUPLICATE of bug 23113
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 12
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2019-06-07 08:58 PDT by Matthew
Modified: 2019-08-02 15:35 PDT (History)
7 users (show)

See Also:


Attachments
Example of video in foreignObject in SVG that is rendered at incorrect location (928 bytes, text/html)
2019-06-07 08:58 PDT, Matthew
no flags Details
Workaround (1.00 KB, text/html)
2019-06-07 09:50 PDT, Matthew
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Matthew 2019-06-07 08:58:44 PDT
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)
Comment 1 Matthew 2019-06-07 09:50:45 PDT
Created attachment 371590 [details]
Workaround
Comment 2 Matthew 2019-06-07 09:51:37 PDT
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.
Comment 3 Radar WebKit Bug Importer 2019-06-07 13:32:51 PDT
<rdar://problem/51533362>
Comment 4 Said Abou-Hallawa 2019-08-02 15:35:39 PDT
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 ***