search

MetaFam / metagame-wiki

Your collaborative guide to your journey into The MetaGame
https://wiki.metagame.wtf
19 stars 48 forks source link

Make use of will-change: transform to boost scrolling performance #297

Closed vidvidvid closed 3 years ago

vidvidvid commented 3 years ago

This PR boosts the scrolling performance of metagame-wiki by applying the will-change: transform on the pseudo element displaying the background image, which gets rid of constant re-rendering of the background image each time the user scrolls (Check the #296 for more info).

This PR includes a slight change in how the background image is and will be positioned by resizing or viewing the site in different browser window sizes, but unless anyone strongly objects against this change, I would consider the noticable performance boost a worth gain for the price of it.

If anyone explicitly wants it, I can also take a closer look into how to keep the current behaviour of the background image - actually I already have an idea how to implement it, but I think it would add unnecessary complexity into the code.

You can check the before/after here: https://easyupload.io/six68p It might not be the best representation of the change, because of the gif's framerate, but you can trust me it feels much better. I can record another video with higher framerate if needed but I recommend you try it on your own with a touchpad or on the phone.

Closes #296

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/metafam/metagame-wiki/3hffynVgTj82YmxRZDCuGoBn4NvK
✅ Preview: https://metagame-wiki-git-improvement-scrolling-metafam.vercel.app

Baconaetor commented 3 years ago

I don't see much of a difference, so I'll merge this in as it does feel smoother, and performance gains are always good.