element1 { height: calc(100% - 50px); -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; } element1:hover { height: calc(100% - 200px); }
When I replace the calc value in the height property with px or % , the transition works fine, but with calc just goes from one height to another without a transition.
In other browsers it works fine, the problem is only in IE
Adding code and a JSFiddle example , similar to my real situation.
div{ position: fixed; right: 0; width: 250px; height: calc(100% - 200px); background: #1c8080; top: 158px; color: #fff; text-align: center; padding-top: 40px; font-size: 18px; border: 1px solid #000; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } div:hover{ height: calc(100% - 100px); top: 58px; } .bottom{ position: absolute; bottom: 15px; width: 100%; font-size: 26px; }
<div> <p>Height tansition</p> <p>Works fine in Chrome, FF</p> <p class="bottom">But not in IE</p> </div>
Yes, I know that in my case setting bottom: 0 to <div> and only changing the height, it also works, but due to an error in IE that changes only from one height to another, so I modeled the effect by changing the top position and height.
So how can I simulate such an effect in IE?
Note I cannot use Viewport elements: vh , vw .
PD: the rare behavior of IE in my case is due to the fact that the transition from top: value to top: otherValue works, but the transition from height: calc(value) to height: calc(otherValue) does not work, this is just a guide.
source share