Weird SVG glitch when using a big shape as a mask and animating it's scale

Hi there,

My brain is melting with a weird rendering issue I’m getting with a big SVG shape that I’m using as a mask to zoom in on the site by animating it’s scale on scroll.

I’ve tried all sorts of hacks including: using a png instead, combining a png and a smaller svg middle, small svg and divs around it and so on but nothing seems to work.
I get this weird corrupted rendering bug when the mask scrolls into view which freezes the site up and causes it to not load on mobile browsers. I’ve had mixed success in getting it kind of working on some browsers with the above hacks but chrome desktop just won’t co-operate no matter what I do…It is extra weird in that once you manually resize the window in chrome, the problem seems to correct itself and the it starts working as expected…

Read only link below: Apologies for my messy code (site is also not finished) but can anyone please shed any light on what’s going on?

If there’s a better solution for the effect I’m trying to create I’d be glad to hear it


Here is my public share link:(Webflow - Ribbit)
(how to access public share link)