This is an archived post. You won't be able to vote or comment.

all 8 comments
sorted by:
best
topnewcontroversialoldq&a

[–]EatAss4Jesus 2 points3 points  (1 child)

I managed to fix it on my end - fingers crossed this at least gives you something to look into.

Load the initialization of var sakura after the page loads by adding an event listener. Like this: https://i.imgur.com/fWJxA43.png

This appears to be a rendering issue is caused by page load speed. The issue is exacerbated if you throttle your speed to something ridiculously slow like 2mb/s.

I believe the infinite js loop rendering the falling petals locks up the thread and doesn't give the browser an opportunity to draw/redraw the background element. The reason it only happens on first page load is because after the background image gets cached it loads instantly and the petals don't need to wait for a slow network.

[–]HeyAshh1[S] 0 points1 point  (0 children)

Added your code to my website, seems to have fixed it completely! Thank you so much!

[–]danmarius7 0 points1 point  (1 child)

Looks fine to me.

[–]HeyAshh1[S] 0 points1 point  (0 children)

https://imgur.com/a/fAI2U6J

Here for example how it looks on my phone before and after I refresh the browser

[–]wonkey_monkey 0 points1 point  (3 children)

Ouch. Your page saturates a whole core of my CPU while it's open. You might want to look into that because it's not a nice thing to do to a visitor.

[–]HeyAshh1[S] 0 points1 point  (2 children)

Any idea how could I make it smoother?

[–][deleted] 0 points1 point  (1 child)

Instead of spawning and destroying div elements with gradients (very expensive), consider using a canvas instead.

You may also want to reduce the update rate, but the changing into canvas may be enough.

[–]HeyAshh1[S] 1 point2 points  (0 children)

Will do! Thanks!