Using calc() to transition width and height in IE

Question

I've come across an issue today where trying to use CSS transitions to change an object's dimensions with calc() aren't working in IE. Or, rather, they're working in the sense that the calculated values are being applied but the transition rules are being ignored.

See an example here: http://jsfiddle.net/32Qr7/

.block {
  width: 350px; height: 100px;
  background-color: red;
  margin: 10px; padding-left: 10px;
  transition: all 1s ease-in-out;
}

.block:hover {
  width: calc(100% - 50px);
  height: calc(150px + 10%);
}

In this example, a div exists which changes its' width, height, and background-color over the course of one second on hover. In IE the background color still animates smoothly, but the width and height change is instantaneous.

This is pretty big issue for me as I have a responsive web app with drawers that slide out from the side, and the rest of the layout has to adjust to compensate. Since I'm dealing with a multitude of screen sizes I can't use hard-coded values.

(And yes, I looked at IE 10 + 11: CSS transitions with calc() do not work hoping for a solution there, but that question doesn't involve dimension changes, and as such the accepted solution there doesn't work for me.)

Does anyone know of a workaround for this issue, or have any other alternate strategies to suggest? I'm hoping to be able to do it in CSS and avoid having to fall back to using jQuery animation techniques or somesuch.

Answer 1

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