CSS Transform origin not working in firefox

Question

I have a CSS question; transform-origin is not working in firefox. The site is centered on chrome and safari, but not on firefox.

html {
transform: scale(0.9);
transform-origin: center top;
}

My site is http://test.lafsdesign.com/

I'd appreciate if you could help me fix this issue. Thank you so much in advance.

Full CSS

@media screen and (max-width: 1240px) {
html {
zoom: 0.9;
-moz-transform: scale(0.9);
-moz-transform-origin: center top;
}
}
@media screen and (max-width: 1140px) {
html {
zoom: 0.8;
-moz-transform: scale(0.8);
}    
}
@media screen and (max-width: 1005px) {
html {
zoom: 0.7; 
-moz-transform: scale(0.7);
}
}
@media screen and (max-width: 880px) {
html {
zoom: 0.6; 
-moz-transform: scale(0.6);
}
}

Answer 1

In Firefox before 41.x with SVGs, it only works when fixed values are used:

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

Firefox won't handle relative values like 'center' or '50%'.

Answer 2

Give percentage instead of position transform-origin: 0% 50%; for center top.. One More thing. transform-origin is not supported for SVG elements in Firefox. there are some workarounds for that. links: https://bugzilla.mozilla.org/show_bug.cgi?id=828286 Setting transform-origin on SVG group not working in FireFox How to set transform origin in SVG Hope it helps