When using CSS Scale in Firefox, element keeps ori

问题:

When using scale in Firefox, the scaled element dóes get scaled properly. The problem is, that it's positioned as if it isn't scaled.

This works fine in Chrome, and probably also in IE, Safari and Opera. These browsers all support the CSS zoom property, where Firefox doesn't. For Firefox I'm using -moz-transform: scale(0.3);.

This is my CSS:

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

This is what it should look like (as in Chrome):

This is what it shouldn't look like (as in Firefox):

Does anybody know how to fix this? Or maybe a workaround?

回答1:

As thirtydot mentioned:

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

This will do the trick.

回答2:

I added -transform-origin: 0 0; and it still did not work.

Somehow in Chrome it collapsed to -webkit-transform-origin: 0;

So I changed it to -transform-origin: top left; and it works fine now.

Full code:

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

回答3:

If absolute positioning is not an option - and aware of according browser support - display: table-cell with a min-width definition, should needs be, might do the trick as well.

E.g. this helped me to get a row with customer logos scaling well across different screen resolutions.