Hi Adrian, I really like the style on your site, and that animation looks great! This is a tough one, but hopefully what I found helps you diagnose the issue.
When I took a look in DevTools, I noticed that the overflow was getting bigger as time went on. I think the issue might be related to the script driving the animation. Specifically:
square.style.top = Math.random() * innerHeight + 'px';
square.style.left = Math.random() * innerWidth + 'px';
If I print out
innerWidth in the console, it keeps increasing. That means squares can keep advancing further and further to the right on the page when created.
What I think is happening is this: the animation randomly generates a square such that the size of the square extends past the right boundary of the webpage, which increases
innerWidth past the width of the viewport.
I haven’t tried it, but I think the simplest way to avoid the overflow is to prevent the animation from creating any squares near the right boundary of the screen. Say the maximum size of a square was
80px. You could subtract
80 from the animation equation on both sides of screen to center the animation and still maintain the same effect:
square.style.left = Math.random() * (innerWidth - 160) + 80 + 'px';
That way you have a buffer on both sides of the screen that prevents squares from exceeding the boundaries of the viewport. Hope this works out for you!