Viewbox not working in svg with foreignobject and custom html elements

Hi,
We have found a new bug in Safari browser we have reproduced it in this jsfiddle:

jsfiddle.net/pzm40dew


The case


When there are nodes that contains custom HTML elements (inserted into a foreignobject) if there is a parent element that has a 'position: relative' and a child element that has 'position: absolute' the child element is moved to svg root container (in the left top) and not in his own parent element. This is an example, but there are more CSS rules which create other issues such as opacity(if you set a different value when you hover the element).

This problem only occurs on Safari browser and Apple mobile devices.


The issue


imgur.com/RTYEamL


Expected result


imgur.com/KiI1lGk


Thanks

Viewbox not working in svg with foreignobject and custom html elements
 
 
Q