CSS Transitions with Calc() Do Not Work in Ie10+

CSS transitions with calc() do not work in IE10+

Maybe transform: translateX() can provide a work-around. Depending on the circumstances, using transforms and the right property might be better:

right: 10%;
transform: translateX(-4rem); 

Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/.

Alternatively, while you can't use calc() within a translateX() in IE (because of a bug), you can apply multiple translateX()s in a transform:

/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));

(However, 90% in this case means 90% of the target, not the parent.)

Using calc() to transition width and height in IE

Seems like I have found a workaround after playing a bit (at least it works for IE10 and IE11). I have used the max-width property instead for calc() method. CSS for hover:

.notworks:hover {
    width: 100%;
    max-width: calc(100% - 50px);
    height: 175px;
}

Example

Not possible to use CSS calc() with transform:translateX in IE

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/Less calc() method is crashing my IE10

I found the problem. There was a height:inherit inside one of the inside divs.
Clearly IE gets super confused on this as the value is calculated and apparently not inheritable. All well now.

So in other words you can't do something like this:

<div style="height:100%">
  <div style="height: calc(100% - 50px)">
    <div style="height:inherit">
    </div>
  </div>
</div>

if you do IE10 will crash, here is an example : http://jsfiddle.net/wyRXp/1/

here i took out the inherit height: http://jsfiddle.net/wyRXp/2/
and it works fine.

Both above samples work fine in Firefox and Chrome

Internet Explorer 10 css3 transition height not happening with parent padding-bottom value

Try making the following changes to #inside:

• Add min-width: 30px; and min-height: 30px;
• Change width: 30px; to width: 1%; and height: 30px; to height: 1%;

#container:hover #inside {    height: 100%;    width: 100%;}#container {    background: black;    height: 0;    padding-bottom: 30%;    position: relative;    width: 30%;}#inside {    background: pink;    height: 1%;    left: 0;    min-height: 30px;    min-width: 30px;    position: absolute;    top: 0;    -webkit-transition: width 0.4s, height 0.4s;    -moz-transition: width 0.4s, height 0.4s;    -o-transition: width 0.4s, height 0.4s;    -ms-transition: width 0.4s, height 0.4s;    transition: width 0.4s, height 0.4s;    width: 1%;}

<div class="out" id="container">    <div id="inside"></div></div>