tweenlite.to hover issues

[dharrah]

When utilizing TweenLite.to and scale in a project with <svg> graphics, I've noticed that FireFox and IE11 (not Edge and untested on <IE11) treat my container as though it were "layered". Each time the mouse hits the <svg> graphic inside the <div> it treats it as if I've left the container and minimizes the resulting scale. This causes a "jerky" effect and looks broken to a normal user. I've verified this by watching the console for when I enter and when I leave. Chrome/Edge do not exhibit this behavior and I cannot see how to "fix" this for Firefox/IE11.

 

**The CodePen is only a partial example of the full project (3 wedges vs. 8) but the effect is the same**

 

Things I've Tried:

 

Adding the correct class on my <path>, <symbol>, <g>, etc => same result

Changing the variable class/id to hit higher in the document => same result

Verbally abuse my computer => same result

 

Any ideas?

 

See the Pen wzKGvW by dharrah (@dharrah) on CodePen

[OSUblake]

Not sure what the issue is. I just tried some other demos in Firefox, and they didn't render correctly.

See the Pen 9b195f9339e6b7667dd74b52cc40ea3b by osublake (@osublake) on CodePen

 

You might be better off asking Sara what's going on. It doesn't look that tool has been updated in awhile.

https://sarasoueidan.com/