I would like to be able to use calc() with transform:translateX in my CSS.
E.g.,
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.
You can see a simple example here: http://jsfiddle.net/SL2mk/9/
Is this impossible? Is it a bug in IE, or is calc()
not supposed to work in this context?
For what it's worth - I read here that you can "stack" translateX
to acheive the same effect, and my testing seems to confirm this. I.e.,
#div {
transform: translateX(calc(100% - 50px));
}
is the same as:
#div {
transform: translateX(100%) translateX(-50px);
}
But I don't know if this is the best, most reliable, and future-proof way to do this.
I also know that it's possible to use left
instead of translateX
, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.
translateX
s, it's the best way