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.
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>