Scroll Trigger - Morph SVG Gap

[dkolb5]

When you hover over the photos a svg morphs. Displaying a white shape over the bottom of the image. If you hover while scrolling there's a 1px gap below the svg and the bottom of the photo. I've tried adjusting CSS and some other JS tests with placement of the morphed svg. But can't seem to make the 1px gap disappear on scroll. Any advice would be greatly appreciated. Thank you!

See the Pen yLKNOxy?editors=1010 by bws_dan (@bws_dan) on CodePen.

[GreenSock]

Ah, the joys of browser rendering weirdness. ? It's unrelated to anything with GSAP. Have you tried this in your CSS?: 

#smooth-content {
  will-change: transform;
}

 

[dkolb5]

That did the trick! Thanks Jack!

[Cassie]

Really like this hover effect too btw. Very nice!