Quando si utilizza la Scala CSS in Firefox, l'elemento mantiene la posizione originale

Question

Quando si utilizza la scala in Firefox, l'elemento ridimensionato viene ridimensionato correttamente. Il problema è che è posizionato come se non fosse ridimensionato.

Questo funziona bene in Chrome, e probabilmente anche in IE, Safari e Opera. Questi browser supportano tutti la proprietà dello zoom CSS, in cui Firefox non lo fa. Per Firefox sto usando -moz-transform: scale (0.3) ;.

Questo è il mio CSS:

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

Questo è quello che dovrebbe apparire come (come in Chrome):

Questo è ciò che non dovrebbe essere simile (come in Firefox):

Qualcuno sa come risolvere questo problema? O forse una soluzione?

Answer 1

Come accennato thirtydot:

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

Questo farà il trucco.

Answer 2

Se il posizionamento assoluto non è un'opzione - e consapevole del supporto del browser secondo - display: table-cell con una definizione min-width, dovrebbe essere necessario, potrebbe fare anche il trucco.

E.g. questo mi ha aiutato a ottenere una riga con i loghi dei clienti in scala bene attraverso diverse risoluzioni dello schermo.

Answer 3

Ho aggiunto -transform-origine: 0 0; e ancora non ha funzionato.

In qualche modo in Chrome è collassato a -webkit-transform-origin: 0;

Quindi l'ho modificato in -transform-origin: in alto a sinistra; e funziona bene ora.

codice 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;