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

Hafenkranich · Answer 1 · 2017-06-30T10:56:42.470

15

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

edited Jun 30 '17 at 10:56

answered Sep 01 '15 at 17:56

Hafenkranich

1,696
18
32

2

It's not fixed for me in FF 48 unfortunately :( – F Lekschas Sep 15 '16 at 18:50
1

it's not fixed in FF 54 neither – JSmith Jun 28 '17 at 22:41
1

Still not fixed in FF 57 – AlbertSamuel Nov 22 '17 at 05:41
@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. – Hafenkranich Jan 16 '18 at 16:57
this resolved my issue if you want to do htmlToPdf and using Qtwebkit engine. – mslugx May 20 '19 at 22:16

score 4 · Answer 2 · edited May 23 '17 at 11:54

4

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

edited May 23 '17 at 11:54

Community

1
1

answered Aug 16 '14 at 13:34

Khaleel

1,212
2
16
34

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). – Rantiev Jul 10 '17 at 10:35

score 4 · Answer 3 · answered Jan 10 '18 at 11:15

4

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

answered Jan 10 '18 at 11:15

yoanm

66
9

score 0 · Answer 4 · answered Sep 20 '17 at 11:56

Transform origin is always a compatibility problem with certain browsers. That too when you use keywords such as center, top, bottom, left, right etc.

Try to give all the values in pixels. All the browsers would understand pixels perfectly. And if you are animating objects from random origin points, then you could go to a design environment and find the exact pixels where the origin has to be and code with the same exact value to be precise and compatible with all the browsers all time :)

CSS Transform origin not working in firefox

4 Answers4