Animating Padding and Height acts strangely in IE

[Rojan]

Hi Carl,

It's me again.

I have been coding an animation using GSAP recently and I came across a case that works fine in Chrome and Firefox but act strangely in IE including IE11.

I eventually found a workaround but I thought maybe it would be something that the GSAP team want to take a look into.

The problem appears when we have a <div /> with "height:XXpx" and "padding:XXpx 0" and we only want to animate this <div />'s padding to a different size.

The truth is that the height doesn't change in the animation at all but...

The problem:
If we provide only the target padding, all the browsers including IE act normally with correct animation, but as soon as we also provide the target height which is practically the same as the initial height, IE animation gets ruined (other browsers still work correctly). When one inspect the elements, it can be seen that the height is being decreased during the animation in IE and comes back to normal at the end.

Workaround:
Not to include the height in the parameters, but this only works if we don't want to change the height during the animation.

*) One thing that might or might not be the reason is that I have used a <svg /> element directly inside the <div /> which is being animated.

Thanks for your attention in advance.

See the Pen NNXowN by Sojaner (@Sojaner) on CodePen

[Carl]

I removed the svg and I get the same results in IE, Safari, Chrome and FireFox

 

http://codepen.io/anon/pen/WwMeNb

 

The height and padding change values and animate as expected.

 

My guess is that IE is somehow tripping up rendering the SVG while its parent is changing size.

 

Keep in mind that GSAP does not control the child elements of tween targets in any way nor is it concerned with them.

[Rojan]

Thanks for your answer Carl.