Lag when scrolled over section with background on website

[1j01]

The section with a fancy tessellating cursors background that I designed is causing lag on my phone. I think background-blend-mode: overlay is too intensive for my phone, or maybe background-attachment: fixed or the combination, but probably just the blend mode.

• maybe use two backgrounds, one a linear-gradient to get a solid color over top
• maybe use a separate div for an extra background-color on top
• maybe use precomposed background images for light and dark themes

I'm not sure a translucent solid color on top would have the same effect as the overlay, so precomposing images could preserve the current look, but reducing contrast further might be a good thing, The text can be hard to read over the background.

Also ideally the background would wrap... On my desktop, this doesn't come into play, but on my mobile, I can see a seam, if I scroll it so the section is towards the bottom of the screen.

[1j01]

Oh it could be the SVG rendering itself. It uses a filter inside the SVG. That's probably it.