198660 2019-06-07 08:58:44 -0700 Video in SVG foreignObject is not translated correctly 2019-08-02 15:35:39 -0700 1 1 1 Unclassified WebKit SVG Safari 12 Mac macOS 10.13 RESOLVED DUPLICATE 23113 BrowserCompat, InRadar P2 Normal --- 1 mattgwwalker webkit-unassigned eric.carlson jer.noble sabouhallawa simon.fraser webkit-bug-importer zalan zimmermann oldest_to_newest 1542831 0 371587 mattgwwalker 2019-06-07 08:58:44 -0700 Created attachment 371587 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) 1542848 1 371590 mattgwwalker 2019-06-07 09:50:45 -0700 Created attachment 371590 Workaround 1542849 2 mattgwwalker 2019-06-07 09:51:37 -0700 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. 1542925 3 webkit-bug-importer 2019-06-07 13:32:51 -0700 <rdar://problem/51533362> 1558174 4 sabouhallawa 2019-08-02 15:35:39 -0700 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 *** 371587 2019-06-07 08:58:44 -0700 2019-06-07 08:58:44 -0700 Example of video in foreignObject in SVG that is rendered at incorrect location bug.html text/html 928 mattgwwalker PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgi PgogIDwvaGVhZD4KCiAgPGJvZHk+CiAgICA8aDE+VmlkZW8gaW4gU1ZHJ3MgJmx0O2ZvcmVpZ25C b2R5Jmd0OzwvaDE+CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj4KICAgICAgPGcg dHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwIDApIj4KCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0 MDAiIGhlaWdodD0iNDAwIiBzdHlsZT0iZmlsbDpyZWQiLz4KCTxmb3JlaWduT2JqZWN0IHg9IjAi IHk9IjAiIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj4KCSAgPGRpdiB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMTk5OS94aHRtbCI+CgkgICAgPHA+VGhlIHZpZGVvIHNob3VsZCBhcHBlYXIgaW4g dGhlIHJlZCByZWN0YW5nbGU8L3A+CgkgICAgPHZpZGVvIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEw MCUiIGNvbnRyb2xzPSJvbiI+CgkgICAgICA8c291cmNlIHNyYz0iaHR0cDovL3RlY2hzbGlkZXMu Y29tL2RlbW9zL3NhbXBsZS12aWRlb3Mvc21hbGwud2VibSIgdHlwZT0idmlkZW8vd2VibSIvPgoJ ICAgICAgPHNvdXJjZSBzcmM9Imh0dHA6Ly90ZWNoc2xpZGVzLmNvbS9kZW1vcy9zYW1wbGUtdmlk ZW9zL3NtYWxsLm9ndiIgdHlwZT0idmlkZW8vb2dnIi8+IAoJICAgICAgPHNvdXJjZSBzcmM9Imh0 dHA6Ly90ZWNoc2xpZGVzLmNvbS9kZW1vcy9zYW1wbGUtdmlkZW9zL3NtYWxsLm1wNCIgdHlwZT0i dmlkZW8vbXA0Ii8+CgkgICAgICA8c291cmNlIHNyYz0iaHR0cDovL3RlY2hzbGlkZXMuY29tL2Rl bW9zL3NhbXBsZS12aWRlb3Mvc21hbGwuM2dwIiB0eXBlPSJ2aWRlby8zZ3AiLz4KCSAgICA8L3Zp ZGVvPgoJICA8L2Rpdj4KCTwvZm9yZWlnbk9iamVjdD4KICAgICAgPC9nPgogICAgPC9zdmc+CiAg PC9ib2R5Pgo8L2h0bWw+Cg== 371590 2019-06-07 09:50:45 -0700 2019-06-07 09:50:45 -0700 Workaround bug.html text/html 1025 mattgwwalker PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgi PgogIDwvaGVhZD4KCiAgPGJvZHk+CiAgICA8aDE+V29ya2Fyb3VuZDogVmlkZW8gaW4gU1ZHJ3Mg Jmx0O2ZvcmVpZ25Cb2R5Jmd0OzwvaDE+CiAgICA8c3ZnIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAw IiB2aWV3Qm94PSIwIDAgNjAwIDYwMCI+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEw MCAwKSI+Cgk8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIHN0 eWxlPSJmaWxsOmJsdWUiLz4KCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MDAiIGhlaWdodD0i NDAwIiBzdHlsZT0iZmlsbDpyZWQiLz4KICAgICAgPC9nPgogICAgICA8Zm9yZWlnbk9iamVjdCB4 PSIxMDAiIHk9IjAiIHdpZHRoPSI0MDAiIGhlaWdodD0iMTAwJSI+Cgk8ZGl2IHhtbG5zPSJodHRw Oi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj4KCSAgPHA+VGhlIHZpZGVvIHNob3VsZCBhcHBlYXIg aW4gdGhlIHJlZCByZWN0YW5nbGU8L3A+CgkgIDx2aWRlbyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIx MDAlIiBjb250cm9scz0ib24iPgoJICAgIDxzb3VyY2Ugc3JjPSJodHRwOi8vdGVjaHNsaWRlcy5j b20vZGVtb3Mvc2FtcGxlLXZpZGVvcy9zbWFsbC53ZWJtIiB0eXBlPSJ2aWRlby93ZWJtIi8+Cgkg ICAgPHNvdXJjZSBzcmM9Imh0dHA6Ly90ZWNoc2xpZGVzLmNvbS9kZW1vcy9zYW1wbGUtdmlkZW9z L3NtYWxsLm9ndiIgdHlwZT0idmlkZW8vb2dnIi8+IAoJICAgIDxzb3VyY2Ugc3JjPSJodHRwOi8v dGVjaHNsaWRlcy5jb20vZGVtb3Mvc2FtcGxlLXZpZGVvcy9zbWFsbC5tcDQiIHR5cGU9InZpZGVv L21wNCIvPgoJICAgIDxzb3VyY2Ugc3JjPSJodHRwOi8vdGVjaHNsaWRlcy5jb20vZGVtb3Mvc2Ft cGxlLXZpZGVvcy9zbWFsbC4zZ3AiIHR5cGU9InZpZGVvLzNncCIvPgoJICA8L3ZpZGVvPgoJPC9k aXY+CiAgICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDwvc3ZnPgogIDwvYm9keT4KPC9odG1sPgo=