score:2

You are missing sizings in a number of places so things either have no size or default to 300 x 150 pixels. This is all per the appropriate specifications and Chrome at some point will implement this properly and match Firefox.

Firstly you need to add these styles to your code.

html, body {
    width: 100%;
    height: 100%;
}

#svg_container {
    width: 100%;
    height: 100%;
}

You also need to set a width/height on the svg element like so...

var svg = svgContainer.append("svg")
    .attr('width', "100%")
    .attr('height', "100%");

Which gives you this

This solves the missing second foreignObject in Firefox.

As to why you're not getting the sizes you expect, font loading is asynchronous so you're probably measuring the text before the font you want has loaded. There's no reliable way to tell if a font has loaded so the usual method is to check at intervals till the text size changes.


Related Query

More Query from same tag