search

marko-js / website

The markojs.com website
http://markojs.com
MIT License
37 stars 25 forks source link

Fix Safari CPU on homepage #75

Open tigt opened 2 years ago

tigt commented 2 years ago

Fixes https://github.com/marko-js/website/issues/101

The .demo-page-loading-linked animations may have to be pure CSS animation, since Safari is still grumpy about it even if we're just toggling opacity: 0.

Hm… or will-change: opacity. That might help, but pure-CSS would be more efficient than the requestAnimationFrame layer we have right now. That JS was first written for a scroll-linked effect… But now that we're animating a simple loop, full CSS may be the best choice.

tigt commented 1 year ago

Trying out using a gradient for the image loading placeholder instead of filter:

Before (filter) After (stacked radial-gradients)
A grayscale blur A slightly different grayscale blur

I also grabbed a clip of it in motion, since it’s only visible for a split second anyway:

https://user-images.githubusercontent.com/8072522/177829749-172961ba-f090-4001-8661-f89de2f276ad.mov

Is that the filter or the gradient? I don’t remember! The filename might be wrong!

tigt commented 1 year ago

What I currently have for the hydration animation:

https://user-images.githubusercontent.com/8072522/178571826-61eec484-406a-48e2-a7d7-4a9e3a8c17d3.mov

Not as good as the existing one, but I’m not sure how to get that particular animation while hardware-accelerating it.

github-actions[bot] commented 1 year ago

PR Preview Action v1.1.1 :---: :rocket: Deployed preview to https://marko-js.github.io/website/./pr-75/ on branch gh-pages at 2022-08-23 18:16 UTC