Q: why is this SVG foreign object not showing in firefox but it is in chrome? I'm working on a web project for displaying some alerts, and this code generates one such alerts, however the main body of the alert which is the foreign object in the div is not visible in firefox but it is in chrome.
<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="-240 -15 1000 700" version="1.1">
.....
<g id="cube2_E">
        <rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
        <rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
        <image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
        <text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
        @*<text text-anchor="start" x="445" y="40" class="txt_alarm_text" >TESTer TEXT super long bunch of info hello how are you this should not fit</text>*@
        <foreignobject width="135" height="95" transform="translate(445,30)" >
            <div>
                TESTer TEXT super long bunch of info hello how are you this should not fit
            </div>
        </foreignobject>
        <line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
    </g>
.......
</svg>

The body of the alert is a foreign object because it contains text that would always get out of the bounds of the gray rectangle where it is supposed to be displayed. as such tspan is not an option, because it would require text to be calculated and split in various lines
I tried switching the code in the svg tag, the viewbox atribute, to width="100%" and height="100%" but that didn't work, even though it was what was causing it to not work in w3school's tryit editor, there I tested with the following code, and it does display in firefox correctly.
<!DOCTYPE html>
<html>
<body>
<svg height="100%" width="100%"  version="1.1">
<text x="0" y="15" fill="red">I love SVG!</text>
 Sorry, your browser does not support inline SVG.
<foreignobject width="135" height="95" >
            <div>
                TESTer TEXT super long bunch of info hello how are you this should not fit
                
            </div>
        </foreignobject>
  </svg>

  </body>
  </html>

the alert alternates between 2 similar objects using this javascript
setInterval(function () {
    anim1();
    setTimeout(function () { anim2(); }, 10000);
    //setTimeout(anim3(), 20000);

}, 20000);
function calRotE1(rot) {
    $("#cube1_E").css({ "transform": "translate(0px,10px) rotateY(" + rot + "deg)", "opacity": "0", "visibility": "hidden" });
    $("#cube2_E").css({ "transform": "translate(0px,10px) rotateY(0deg)", "visibility": "visible" });


}
function anim1() {
    calcRotation1(90);
    calRotE1(180);
};

function anim2() {
    calcRotation2(0);
    calRotE2(0);
};
function calRotE2(rot) {

    $("#cube1_E").css({ "transform": "translate(0px,10px) rotateY(" + rot + "deg)", "opacity": "1", "visibility": "visible" });
    $("#cube2_E").css({ "transform": "translate(0px,10px) rotateY(180deg)", "visibility": "hidden" });
    
}

here is the side "A" of the alarm
<g id="cube1_E">
            <rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
            <rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
            <image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="imageA.png"></image>
            <text text-anchor="start" x="354" y="15" class="txt_ti_E">Title A</text>
            <foreignobject width="135" height="95" transform="translate(440,30)">
                <div>
                    Body A
                </div>
            </foreignobject>
            <line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
        </g>

I even tested the whole chunk of code in the tryit editor and it did display correctly. I just can't explain why it all works fine in chrome but not firefox
 <svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="-240 -15 1000 700" version="1.1">

<g id="cube2_E">
        <rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
        <rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
        <image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
        <text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
        
        <foreignobject width="135" height="95" transform="translate(445,30)" >
            <div>
                TESTer TEXT super long bunch of info hello how are you this should not fit
            </div>
        </foreignobject>
        <line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
    </g>

</svg>


A: Like it is suggested in the comments the element is called <foreignObject> with capital "O" and you could use the proper namespace for the child element.


<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg">
  <g id="cube2_E">
    <rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
    <rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
    <image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
    <text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
    <foreignObject width="135" height="95" transform="translate(445,30)" >
      <div xmlns="http://www.w3.org/1999/xhtml">
        TESTer TEXT super long bunch of info hello how are you this should not fit
      </div>
    </foreignObject>
    <line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
  </g>
</svg>


