Microsoft Edge css overflow+css filter+animate issue

[Taylan]

Hey guys. First things first, I love gsap and its team!

 

I have items with css filter applied.

 

My issue is with Edge browser. Either removing the filter or making overflow visible fixes the issue (I obviously want to have both if possible).

After sliding a few items, it starts to get distorted like in the image. See codepen to understand better.

 

 

I'm not sure if this is caused by gsap, but nevertheless, I figured you guys would like to know about this.

 

Microsoft Edge 44.19041.1.0

Microsoft EdgeHTML 18.19041

Any help is appreciated. Thanks!

See the Pen xxZEKRp by taylankasap (@taylankasap) on CodePen

[ZachSaucier]

Hey Taylan and welcome to the GreenSock forums!

 

This definitely seems like an Edge bug, not at all related to GSAP. You can test that yourself by applying the properties to the element(s) without using GSAP.

 

I recommend that you make a minimal demo without GSAP or any logic and report it to Microsoft. I think you can do that by clicking the smiley face button in the top right corner of Edge.

[Taylan]

Thanks for the quick response.

 

Even DOM reflow (e.g. calling getBoundingClientRect) doesn't make the distortion go away. But changing tabs, minimizing/maximizing the browser window etc. fixes the distortion.

 

Do you have any idea to how to mimic the same "re-render" operation via JavaScript? If not I guess I'll disable the filter on Edge for now since I can't seem to find another workaround.

[ZachSaucier]

43 minutes ago, Taylan said:

Do you have any idea to how to mimic the same "re-render" operation via JavaScript?

You could try changing a property on it. Sometimes adding a translate3d can fix things like that. Or at times adding will-change. 

[Taylan]

It didn't work but thank you. I realized I had a non-chromium version of Edge. It turns out I don't need to support this. Sorry for the inconvenience.