Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rojan

Animating Padding and Height acts strangely in IE

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Carl,

It's me again. :P

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

Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×