Refactor the effect on the sponsors and fix a position caching bug #815
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I was investigating #195. This doesn't necessarily fix all the problems reported there but it may help.
The Patreon Sponsors on the homepage are shown in grayscale until the page has scrolled to a certain point. I made the following observations:
sponsorTop
is not always correct. Elements can move when content loads, it doesn't require a pageresize
for things to move. This could be why Sponsor gray/color change is jumpy #195 observed the transition occurring in a strange place.window
. The hook is called during SSR so that shouldn't be necessary.I've refactored it to use Vue in a more idiomatic way. This also removed a big chunk of the code. The caching of
sponsorTop
is gone and the listener is removed when leaving the page.I don't believe there was any significant performance benefit from caching the
offsetTop
value. Style recalcs and page reflows shouldn't be a factor here.Aside from fixing the caching bug, I have not changed the point at which the transition occurs or the speed of the transition.