Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

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

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.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.