ForeignObject not displaying in Firefox, but is in Chrome and Edge

Question

I am trying to fix a rendering bug with my program, which currently works perfectly in Chrome and Edge. Firefox does not render the foreignObjects at all

I am using the SVG.js library, which produces the code below for one of my foreignObjects. I have tried a fix from an earlier question, which was to use the css code below to no effect.

<foreignObject width="256" height="66" x="76" y="1113">
<span id="run" xmlns="http://www.w3.org/1999/xhtml">
<button type="button" id="runButton" class="userButtons" style="width:133px;height:65px">RUN</button>
</span>
</foreignObject>

svg {
overflow: visible;
}

If anyone has any ideas I would be very grateful.

Answer 1

Quite likely, your svg doesn't have a explicit height.
Try to add a viewBox and height/width properties:

 svg{ overflow: visible; border:1px solid red; }.scroll{ height:900px; overflow:auto; }

 <div class="scroll"> <svg viewBox="0 0 256 66" width="256px" height="66"> <foreignObject width="256" height="66" x="76" y="500"> <span id="run" xmlns="http://www.w3.org/1999/xhtml"> <button type="button" id="runButton" class="userButtons" style="width:133px;height:65px">RUN</button> </span> </foreignObject> </svg> </div>