I am trying to position a 'div' under a 'textarea' within an 'svg' and 'g' element. This works fine in Firefox, but not in Chrome.
When I apply a transform on the 'g' element, it moves correctly to the desired position. However, nested elements with the "class" property are not positioned correctly. For example, a single 'i' element without children works well, but a 'span' does not.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit; position: fixed;" version="1.1">
<g id="g1" transform="translate(130,30)">
<foreignObject x="0" y="0" width="150" height="150" overflow="visible" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<textarea style="background: white; color: black; border-radius:6px;border-style: solid; border-width: 3px; width: 140px; font-size: 12px; resize: none; height: 50px">test</textarea>
<div style="margin-top: -5px;height: 33px;">
<a href="">
<i class="fa fa-arrow-right"></i>
<span class="fa-stack" title="Insert section">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
</foreignObject>
</g>
</svg><svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit; position: fixed;" version="1.1">
<g id="g1" transform="translate(130,30)">
<foreignObject x="0" y="0" width="150" height="150" overflow="visible" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<textarea style="background: white; color: black; border-radius:6px;border-style: solid; border-width: 3px; width: 140px; font-size: 12px; resize: none; height: 50px">test</textarea>
<div style="margin-top: -5px;height: 33px;">
<a href="">
<i class="fa fa-arrow-right"></i>
<span class="fa-stack" title="Insert section">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
</foreignObject>
</g>
</svg>
Run the fiddle on both browsers to see the problem I mentioned: Fiddle
Here are the screenshots for reference:
Firefox Screenshot: Chrome Screenshot:
Thank you in advance o7
EDIT1:
It seems like a bug in Chrome. You should report this issue on their bug-tracker. When inspecting the element, the bbox is drawn correctly, but the actual element appears completely off.
In response to Kaiido's answer, it appears to be a Chrome-specific issue as there have been multiple instances of SVG-related problems with Chrome. Another interesting point is that the icon's positioning depends on the textarea's height. For example, if I set the height of the textarea to 200px, the icon will be further down as if an invisible textarea were above it.