When using the calc() function to set scale values in my less class as a function, I encountered an issue where it works on Chrome but not Firefox. Below is the code snippet for 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;
}
}