Using calc inside CSS3 transform in Internet Explorer

/ June 13, 2018/ Frontend General

(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 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
1 year ago

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

trackback
CSS variables for fun and no profit – Slacker News
1 year 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
11 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);