Mzoughi Yahya Mzoughi Yahya - 1 month ago 19
Less Question

CSS3: calc not working in Firefox

I have a less class as a function. I use calc() to set scale value, it working on chrome but not Firefox. this is my class:

.zoom(@value) {
transform: scaleX(@value);
-moz-transform: scaleX(@value);
-ms-transform: scaleX(@value);
-webkit-transform: scaleX(@value);
transform-origin: 0;
.blocFreq {
&:before {
-webkit-transform: scaleX(calc(1/@value)) !important;
-moz-transform: scaleX(-moz-calc(1/@value)) !important;
-ms-transform: scaleX(calc(1/@value)) !important;
transform: scaleX(calc(1/@value)) !important;
}
}
span.frequence {
-webkit-transform: scaleX(calc(1/@value))rotate(-44deg) !important;
-moz-transform: scaleX(-moz-calc(1/@value))rotate(-44deg) !important;
-ms-transform: scaleX(calc(1/@value))rotate(-44deg) !important;
transform: scaleX(calc(1/@value))rotate(-44deg) !important;
}
.text,
.text-service,
.popover {
-webkit-transform: scaleX(calc(1/@value)) !important;
-moz-transform: scaleX(calc(1/@value)) !important;
-o-transform: scaleX(calc(1/@value)) !important;
-ms-transform: scaleX(calc(1/@value)) !important;
transform: scaleX(calc(1/@value)) !important;
}
}

Answer

Try to remove calc function and use only (1/@value). I think that will fix your bug.