In Chrome, why don't SVG foreignObjects scale relatively positioned content?

Question

I am using relatively positioned HTML elements in an SVG foreignObject. However, in Chrome, the relatively positioned content isn't respecting scale() or viewBox. Consequently it isn't the right size.

Here is an example of my problem on jsFiddle. All three text snippets should appear the same size to the end users... but in Chrome they don't.

What's causing this?

Firefox Screenshot (as expected?)

Chrome Screenshot (bug?)

Answer 1

Judging from the

24 bugs related to foreignObject on the WebKit tracker and the

19 issues related to foreignObject on the Chromium tracker,

it seems this is very likely unintended behavior. I encourage you to look at the WebKit bug list to see if this issue is known. If it is not, try to reproduce this error on another WebKit browser. If the issue is reproducible in e.g. Safari, submit it as a bug to WebKit; if not, submit it as a bug to Chromium.

My guess is that it is a WebKit bug; this bug looks kind of similar.