Using calc inside CSS3 transform in Internet Explorer
(Last Updated On: October 7, 2018) (Last Updated On: October 7, 2018)You have probably been in this situation. You need to animate some element position based on other elements using
transform and it does no work.
Internet Explorer has several
bugs quirks and the inability of use
calc() inside a
transform is one of them. A good workaround is just to use the ability of the browser to parse parallel transform functions.
If we need to do this:
To work around this, you can chain transforms. For instance, the following statements are equivalent:
transform: translateX(calc(100% - 10px + 65px - 93px));
We could just write each
calc() value in their own
transform: translateX(100%) translateX(-10px) translateX(+65px) translateX(-93px));
The browser (Internet Explorer included) will move the element one
translateX at the time and the result will be the same as using all inside a