Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Safari CPU on homepage #75

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Fix Safari CPU on homepage #75

wants to merge 3 commits into from

Conversation

tigt
Copy link
Contributor

@tigt tigt commented Jun 24, 2022

Fixes #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 tigt requested a review from mlrawlings June 24, 2022 17:06
@tigt
Copy link
Contributor Author

tigt commented Jul 7, 2022

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:

gradient-in-motion.mov

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

@tigt
Copy link
Contributor Author

tigt commented Jul 12, 2022

What I currently have for the hydration animation:

hardware-accelerated-partial-hydration.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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Todo
Development

Successfully merging this pull request may close these issues.

CPU load on https://markojs.com
1 participant