不能在CSS中使用CSS calc（）和transform：translateX [英] Not possible to use CSS calc() with transform:translateX in IE

问题描述

所有，

我希望能够在我的CSS中使用calc（）和transform：translateX。

例如，

#myDiv {
-webkit-transform：translateX （calc（100％ - 50px））;
-moz-transform：translateX（calc（100％ - 50px））;
transform：translateX（calc（100％ - 50px））;
}


虽然这在Chrome，Safari和Firefox中完美运行，但它不起作用在IE10或IE11中。

你可以在这里看到一个简单的例子： http://jsfiddle.net/SL2mk/9/

这是不可能的吗？它是IE中的错误，还是 calc（）不应该在这种情况下工作？

这是值得的 - 我阅读这里，你可以堆栈 translateX 来达到同样的效果，我的测试似乎证实了这一点。即，



#div {
transform：translateX（calc（100％ - 50px ））;

$ / code $ / pre

与
$ b $相同b

  #div {
 transform：translateX（100％）translateX（-50px）; 
} 
  

但我不知道这是否是最好的，最可靠的，未来的方式来做到这一点。

我也知道可以使用 left 而不是 translateX ，但后者在使用转换时更加顺畅，因为据我了解，它强制使用GPU来处理动画。

预先感谢您的建议和见解！

解决方案

b

  transform：translateX（100％）translateX（-50px）; 
  

在解析时被编译，但是在这里是calc表达式：

  transform：translateX（calc（100％ -  50px））;每当浏览器需要该值时，必须解释
  

。表达式的结果可以被缓存，但我不会依赖于浏览器来使用这种类型的优化。

所以第一个更好，因为a）现在，b）是有效的，并且c）它将在将来工作直到规范生效。

All,

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.

Thanks in advance for your advice and insight!

解决方案

This:

transform: translateX(100%) translateX(-50px);

gets compiled at parse time, but calc expression here :

transform: translateX(calc(100% - 50px));

has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.

So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.

这篇关于不能在CSS中使用CSS calc（）和transform：translateX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！