Animating with GSAP Causes Clipping of CSS Filters

[thejamespower 9 Likes (Newbie)]

Hiya,

 

Working on something snazzy with GSAP and CSS Filters, specifically blur. I've noticed that when animating with GSAP, clipping occurs on any object with a CSS filter. Is this expected behaviour? 

 

See the Pen akybXr by thejamespower (@thejamespower) on CodePen

[thejamespower 9 Likes (Newbie)]

I edited the codepen to also include the equivalent pure CSS animation and the same clipping occurs. I've also discovered this only occurs in Chrome. Any ideas on how to overcome this?

[Jonathan 5,389 Likes (Superhero)]

Hello thejamespower

 

This is not a GSAP bug.. I only see this happen in webkit based browsers like Chrome, Firefox is renders fine.

 

But the browser is rendering your element that way since you have a CSS filter and a 3D transform together.

 

You can see here in this CSS only version that clipping is happening, view in Chrome:

 

See the Pen rLzaNk by jonathan (@jonathan) on CodePen

 

So this is a browser rendering bug in webkit, and not GSAP

[thejamespower 9 Likes (Newbie)]

This is true

 

If anyone's interested I've filed a bug report with the Chrome team: https://bugs.chromium.org/p/chromium/issues/detail?id=625971

[OSUblake 18,477 Likes (Superhero)]

Whenever you see something strange happening with a transform, try playing with the force3D value.

See the Pen AXojkv by osublake (@osublake) on CodePen

[Jonathan 5,389 Likes (Superhero)]

Nice i was going set force3D false.. but i saw it was a Chrome webkit bug still affecting CSS animations with filter and 3D transforms.

 

Chrome is ignoring transform-style: flat; to force CSS 2D transforms and disable CSS 3D transforms.

 

So this is still a webkit bug, but its good to know GSAP can work around it using JS, even though CSS Animations are left to wallow in its self pity.