choppy animations in Firefox with mask
Hi guys,
I have run into a performance issue with my personal website. I have this background animation that runs infinitely. On top of it there is a mask, making the edges fade out.
This all works perfectly in chromium based browsers, but on firefox it lags a lot when using the mask. Disabling or removing the mask stops the lag and makes the animaton run smoothly.
Is there anything I can do about this besides straight up disabling the mask if the user is using Firefox?
I can provide code if necessary
5 Replies
A couple of things come to mind but definitely going to need to see the live site or a codepen to know what's going on with this for sure
can i get astro running on codepen?
not super familiar with astro but it does look like there's an option to "Add Packages" in codpens JS window settings? This might be what you're looking for.
i actually managed to replicate it with a bit of gpt help without astro, but the layout isnt fully matching, the issue is there tho
does this link work for you @jsnkuhn https://codepen.io/MyPenUser/pen/gOJgERr ?
just a note, i do run a 4K display which exagerates the effect, it also seems to be less bad on codepen? so u may have to expand the window for it lag for you
as soon as i disable mask or rotation the animation is much more fluent
if i add another container and rotate that instead of the rows then its less laggy but then the page lags on scroll instead of the animation
I'm not getting any lag issues on FF myself and can't seem to make it lag. But that sure is a lot of generated DOM elements so it wouldn't surprise me to see it lag. It's good that it's animated on a
transform so it is going to the GPU but I think you're really running into the limits here of what CSS is going to be able to handle. I'm guessing you'd probably be better off with a <canvas> for this.
But if it's just an issue with adding the mask maybe it's from the compositing of 3 different gradients? You could do the left and right side transparency in one linear gradient then you'd only be compositing 2 images. You might be able to get away with one radial-gradient that looks similar enough to what your trying to accomplish with something like radial-gradient(at bottom, red, #0000). Then you wouldn't need the composite at all.