ACTUALIZACIÓN: Pude forzar el cuadro y el texto para que funcionaran agregando un valor de "altura" en CSS, pero la imagen BG no se carga. Inspector muestra que la imagen se está cargando desde la fuente correcta, pero no se mostrará en Firefox. Intenté configurar el cheque nulo en falso y soltar el "!" operador del código getElementByID pero eso no lo solucionó.

Creé un juego de mecanografía simple que se supone que crea una superposición con un cuadro de diálogo que le permite al jugador volver a la página de selección o repetir el juego. El cuadro de diálogo se muestra bien en Chrome y Edge (IE), pero en Firefox, el Inspector muestra el div del cuadro colapsado a una altura de 1px.

aquí está el código: HTML

 ... <div className="overlay" id="overlay_2"> <div className="dialog"> <div className="dialogcontainer"> <img className="dialogbg"/> <h3 className="dialogtext">Would you like to repeat this quest?</h3> <a href="/affirmation"><h2 className="no">Go back</h2></a> <h2 className="yes" onClick={repeat}>Repeat</h2> </div> </div> </div> ...

JS

 function endGame() { var end = document.getElementById('audio_end')!; (end as HTMLAudioElement).play(); document.getElementById('overlay_2')!.setAttribute("style","display: block; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); z-index: 20"); }

CSS

 .dialog { position: absolute; left:50%; top: 50%; transform: translate(-50%, -75%); } .dialogcontainer { position: relative; text-align: center; } .dialogbg { position: relative; width: 500px; content: url("/Images/Video%20Page/dialog.jpg"); } .dialogtext { position: absolute; width: 70%; top: 50px; left: 50%; transform: translate(-50%, 0); } .yes { position: absolute; width: 40%; bottom: 30px; right: 30px; cursor: url('/Images/Main%20Menu/mouse2.png'), auto; } .no { position: absolute; width: 40%; bottom: 30px; left: 30px; cursor: url('/Images/Main%20Menu/mouse2.png'), auto; } .yes:hover, .no:hover { color: #555; }

La superposición translúcida negra funciona bien en Firefox, pero el cuadro no se muestra. He deshabilitado todos los bloqueadores de anuncios en Firefox, pero ese no era el problema. Cualquier ayuda es muy apreciada.