El problema se puede ver hasta sin poner el código en la pregunta: tienes un transform: translate(-50%, -50%)
que se aplica bien en Chrome e IE, pero que sin el prefijo -moz-
no se va a ver bien en Firefox.
Dentro de tu código en particular tienes esto:
#helloDialog {
width: 400px;
background-color: #FFFFFF;
margin: 10px auto;
padding: 5px 15px 5px 15px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
zoom: 80%;
-moz-transform: scale(0.5, 0.5);
-moz-transform-origin: left center;
}
Como puedes ver, hay un estilo definido específicamente para -moz-transform
que no es el translate
sino el scale
y eso hace que se sobreescriba la transformación definida arriba y que no se aplique la translación del diálogo y se vea mal posicionado.
La solución es simple, se puede añadir múltiples transformaciones separadas por coma, así que añade el translate(-50%, -50%)
al -moz-transform
y problema resuelto:
#helloDialog {
width: 400px;
background-color: #FFFFFF;
margin: 10px auto;
padding: 5px 15px 5px 15px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
zoom: 80%;
-moz-transform: translate(-50%, -50%), scale(0.5, 0.5);
-moz-transform-origin: left center;
}
Así es como lo veo yo después de cambiar ese estilo en el inspector de elementos de Firefox: