Menu
I'm using <foreignObject> SVG element to embed a <video> element inside an SVG-based UI.
Everything is fine on all browsers but Safari, where the positioning of the video element is completely wrong respect to its <foreingObject> container.
I built a simple page to reproduce the issue, also available on Codepen:
<body style='background-color: #999'>
<svg viewBox='0 0 100 200' style='width: 200px; height: 400px; border: 1px solid black'>
<foreignObject x='10' y='10' width='80' height='80'>
<div xmlns='http://www.w3.org/1999/xhtml' style='height: 100%; background-color: white; border: 1px solid blue'>
<span>bla bla bla</span>
</div>
</foreignObject>
<foreignObject x='10' y='110' width='80' height='80'>
<div xmlns='http://www.w3.org/1999/xhtml' style='width: 100%; height: 100%; border: 1px solid red'>
<video xmlns='http://www.w3.org/1999/xhtml' width='100%' height='100%' playsinline autoplay src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4'></video>
</div>
</foreignObject>
</svg>
</body>
Here there is the rendered page: on the left Chrome version, on the right the Safari one.
caniuse states that <foreignObject> is supported on Safari and actually the video element is displayed. But what's wrong with its positioning?
765
Hard to believe, this is a bug in webkit. More hard to believe, this bug is open since ... 2009!!!
Having a look at comments on the bug page, it turns out that a possible workaround is to add position: fixed to the style of the div containing the video element.
Thanks to @Robert Longson for pointing me in the right direction.
Personal comment: I can't understand why caniuse declares foreignObject as supported on Safari when this bug is open for such a long time.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
