title: Not possible to use CSS calc() with transform:translateX in IE
body: <p>All,</p>
  
  <p>I would like to be able to use calc() with transform:translateX in my CSS.</p>
  
  <p>E.g.,</p>
  
  <pre class="lang-css prettyprint-override"><code>#myDiv {
    -webkit-transform: translateX(calc(100% - 50px));
    -moz-transform: translateX(calc(100% - 50px));
    transform: translateX(calc(100% - 50px));
  }
  </code></pre>
  
  <p>While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.</p>
  
  <p>You can see a simple example here: <a href="http://jsfiddle.net/SL2mk/9/" rel="noreferrer">http://jsfiddle.net/SL2mk/9/</a></p>
  
  <p>Is this impossible? Is it a bug in IE, or is <code>calc()</code> not supposed to work in this context?</p>
  
  <p>For what it's worth - I read <a href="https://stackoverflow.com/a/21381301/49383" title="here">here</a> that you can "stack" <code>translateX</code> to acheive the same effect, and my testing seems to confirm this. I.e.,</p>
  
  <pre class="lang-css prettyprint-override"><code>#div {
    transform: translateX(calc(100% - 50px));
  }
  </code></pre>
  
  <p>is the same as:</p>
  
  <pre class="lang-css prettyprint-override"><code>#div {
    transform: translateX(100%) translateX(-50px);
  }
  </code></pre>
  
  <p>But I don't know if this is the best, most reliable, and future-proof way to do this.</p>
  
  <p>I also know that it's possible to use <code>left</code> instead of <code>translateX</code>, 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.</p>
  
  <p>Thanks in advance for your advice and insight!</p>