When using CSS Scale in Firefox, element keeps original position

Question

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?

Answer 1

As thirtydot mentioned:

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

This will do the trick.