Menu
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);
}
}
880
CSS transform-origin Property 1 Definition and Usage. The transform-origin property allows you to change the position of transformed elements. ... 2 Browser Support. The numbers in the table specify the first browser version that fully supports the property. ... 3 CSS Syntax 4 Property Values. Defines where the view is placed at the x-axis. ...
The transform-origin CSS property sets the origin for an element's transformations. The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate () function is the center of rotation. In effect, this property wraps a pair of translations around the element's other transformations.
The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform..element { transform: rotate(360deg); transform-origin: top left; }
Definition and Usage. The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.
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%'.
177
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
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
