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
tweenlite.to hover issues
in GSAP
Posted
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