scale css

Cuando se usa la Escala CSS en Firefox, el elemento mantiene la posición original

Question

Cuando se usa la escala en Firefox, los elementos escalados se escalan correctamente. El problema es que está posicionado como si no estuviera escalado.

Esto funciona bien en Chrome, y probablemente también en IE, Safari y Opera. Todos estos navegadores son compatibles con la propiedad de zoom CSS, donde Firefox no. Para Firefox estoy usando -moz-transform: scale (0.3) ;.

Este es mi CSS:

#overview .page-content {
zoom: 0.3;
-moz-transform: scale(0.3);
}

Este es el aspecto que debe tener (como en Chrome):

Esto es lo que no debería verse (como en Firefox):

Sabe alguien cómo arreglar esto? O tal vez una solución?

Answer 1

Agregué -transform-origin: 0 0; Y todavía no funcionó.

De alguna manera en Chrome colapsó a -webkit-transform-origin: 0;

Así que lo cambié a -transform-origin: arriba a la izquierda; y funciona bien ahora.

Código completo:

-moz-transform: scale(50%);
-moz-transform-origin: top left;
-o-transform: scale(50%);
-o-transform-origin: top left;
-webkit-transform: scale(50%);
-webkit-transform-origin: top left;

Answer 2

Como thirtydot y thirtydot mencionó:

position: absolute;
-moz-transform-origin: 0 0;

Esto hará el truco.

Answer 3

Si el posicionamiento absoluto no es una opción, y si se tiene en cuenta que es compatible con el navegador, display: table-cell con una definición de min-width , en caso de que sea necesario, también puede hacer el truco.

Por ejemplo, esto me ayudó a obtener una fila con los logotipos de clientes que se adaptan bien a diferentes resoluciones de pantalla.