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

Solution 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%'.

Solution 2

To fix this bug on Firefox, you can use : transform-origin: center; transform-box: fill-box;

Solution 3

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

Comments

[F Lekschas]

It's not fixed for me in FF 48 unfortunately :(

[JSmith]

it's not fixed in FF 54 neither

[Rantiev]

Khaleel, thanks, i have experienced right what you wrote, the transformation doesn't work for SVG parts in Firefox (54.0.1 (64-bit) on mac).

[AlbertSamuel]

Still not fixed in FF 57

[Hafenkranich]

@IlyaStreltsyn same here, anything thats flexible in any kind won't work properly. Unfortunately you have to use JavaScript should you need responsiveness. Maybe yoanm's idea below woks, haven't testet it yet.

[mslugx]

this resolved my issue if you want to do htmlToPdf and using Qtwebkit engine.