Using calc inside CSS3 transform in Internet Explorer

/ June 13, 2018/ Frontend General

(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 calc() inside transform and it does no work.

Ad:


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 translateX property:

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 calc() function.

Ad:


Spread the love
Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mike
Mike
1 year ago

Thank you for this article. I was struggling with combining the math inside of the calc and could not get it working. The “chained” translates did the trick for what I was trying to accomplish.

rgrg
rgrg
Reply to  Saninn Salas Diaz
11 months ago

how about multiply? translateX(calc(-33.3333333333%*9)) in this case?

trackback
CSS variables for fun and no profit – Slacker News
10 months ago

[…] them, though it doesn’t work entirely right in Internet Explorer and if you need to support that, a workaround is in […]

TheFirsh
TheFirsh
5 months ago

Thank you, this is gold. Can’t believe they haven’t fixed this bug. This is how I use a %-based scale:

transform: scale(var(--my-scale-percentage)) scale(0.01);