CSS transformation start not working in firefox

Question

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

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

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

I would be grateful if you could help me fix this problem. 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 prior to 41.x with SVG, it only works when using fixed values:

 -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 will not process relative values ​​such as "center" or "50%."

Answer 2

Give a percentage instead of the transform-origin: 0% 50%; position transform-origin: 0% 50%; for the top of the center. One more thing. transform-origin is not supported for SVG elements in Firefox. There are some workarounds for this. links: https://bugzilla.mozilla.org/show_bug.cgi?id=828286 Setting up a source transform in an SVG group that does not work in FireFox How to establish the origin of the transformation in SVG I hope this helps

Answer 3

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

Answer 4

The origin of the conversion is always a compatibility issue with certain browsers. This is also when using keywords such as center, top, bottom, left, right, etc.

Try to specify all values ​​in pixels. All browsers would understand pixels perfectly. And if you animate objects from random points of origin, you can go to the design environment and find the exact pixels where the origin should occur, and the code with the same exact value to be accurate and compatible with all browsers all the time :)