Distorted modal overlay with Timeline

[justin_rings]

Hello,

 

Myself and team are pretty new to GreenSock ...  and have come across a pretty sporadic issue. So, first what we are doing is launching a modal and then using GS Timeline to animate a card flip transition form modal to modal.  In some cases, not always consistent, we are seeing the overlay getting disported pixels (see attached image). We've done some research and have tried quite a few things but noting seems to be bulletproof. I just wanted to see if there was anyone else seeing this issue and what the fix was. 

 

Thanks, 

Justin 

 

 

 

 

[PointC]

Hi justin_rings  ,

 

Welcome to the forums. 

 

Is this happening in all browsers? or just one particular one?

 

Without a CodePen example or knowing which browser is causing trouble, I'm just going to take a shot in the dark here: Have you tried the following:

-webkit-backface-visibility:hidden;

Additional potential fixes may be to add transformPerspective to your element or set force3D:false on your tween. (force3D:auto is the default)

 

Check out this forum post which may offer additional possibilities: 

http://greensock.com/forums/topic/11146-3d-transform-matrix3d-artifacts-blurry-elements-in-safari-osx-and-ios/

 

Also - you are using the latest version of GreenSock, correct?

 

If none of those things fix it, others may jump in with some ideas.

 

If you could post a CodePen so everyone could try out your code, that would get you the best answers. It doesn't have to be your actual project. Just a stripped down version with some plain divs that recreate the problem is perfect. 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully this helps a bit.

 

Happy tweening.

[GreenSock]

Hi Justin. Welcome. 

 

I can't recall ever seeing something quite like what you described, and I cannot imagine how it could possibly be caused by GSAP. I guess one way to rule that out is to try recreating the same effect without GSAP; if you still see the issue, it's clearly not a GSAP issue. If not, it'd certainly help us diagnose whatever issue there may be. 

 

Keep in mind that GSAP doesn't do any graphics rendering - that's totally the browser's job. All that GSAP does is set property values (very quickly, 60 times per second). 

 

I'm also curious if you see the same glitch on other systems. It could be a problem with your video card. If you can't reproduce it on other systems, it's likely your hardware (or software driver). 

 

We'd love to help and we definitely want to make sure GSAP is bug-free, so please let us know what you discover and if you can put together a codepen demo or something, that'd be swell. 

[justin_rings]

Alright ... It took a bit to simplify a codepen, but I have one here: 

See the Pen BjdEYG by braceandbracket (@braceandbracket) on CodePen

. This outlines generally how we use GS ... there are a couple of api calls made during the transitions, but the ones we hit in real life are a bit heavier then the ones I'm using in the codepen. 

 

I'm not able to reproduce in the codepen, but maybe there is something that stands out as a potential problem.  

 

Thank you so much for the help! 

 

Justin 

[GreenSock]

Thanks for putting the codepen together. Were you saying that you could **NOT** see the problem in the codepen version? Makes it pretty tough for us to diagnose; it certainly sounds like something else is amiss that's unrelated to GSAP. The only slighly odd thing I noticed was that you were using a set() to apply "preserve-3d". Was there a particular reason for that? It shouldn't break anything at all - I just thought it'd be easier and more concise to just apply it at the CSS level initially. But again, the way you did it isn't a "problem". 

 

I wish I had a great solution for you. Please let us know if you're able to reproduce it in a codepen or some other reduced test case that we can dig into. 

[Jonathan]

I'm not near my computer right now. But I have seen these same artifacts on some graphics cards and also with a mixture of other CSS properties higher in the DOM. Usually they are resolved by the right video driver. Also since you said you are unable to reproduce in the codepen tells me you might have a conflicting CSS property in the original code, but again that also would stem from a hardware issue like Jack mentioned above.

 

Also i noticed that you are mixing perspective and transform perspective. You should use either or, the reason is due to cross browser bugs. So you should either apply the perspective property on the parent of the elements being rotated. Or apply the transformPerspective property on the element itself. Don't ever mix both together or you will have issues like what you are seeing.

 

Here is an example of a card flip.. in this case I'm using perspective on the cards parent, but could have also just used transformPerspective on the card itself

 

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