Share Posted December 17, 2020 Hi all, I seemed to have unearthed a bug on Chrome and Edge (webkit I think) where staggered lines appear when and svg is animated down (specifically on scaling). The lines appear randomly (different on every load it seems) as it animates down to size. This appears to happen in webkit all of a sudden and was just going to see anyone has come across it at all and if you could propose a fix (be it a GSAP setting or CSS property)? My efforts so far have not done the trick. The below codepen demonstrates a simplified example which I have slowed down using timescale (does show at 1x) and also repeated. Any help would be greatly appreciated See the Pen yLabwpJ by samwoodchs (@samwoodchs) on CodePen Link to post Share on other sites
Solution Share Posted December 17, 2020 Hey CHS Digital. Perhaps it'd work better if you scaled the content within the SVG instead of the SVG itself? You could also try applying will-change: transform to the element(s) being transformed. Unrelated but we recommend using the sleeker GSAP 3 syntax: 4 Link to post Share on other sites
Author Share Posted December 17, 2020 Hi ZachSaucier Thanks for your reply, your solution worked perfectly adding the will-change css property! Lifesaver! Also thanks for the advice on upgrading GSAP - will look into doing that Many thanks Link to post Share on other sites
