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

refactor(v2): use transform instead of top position for hideable navbar #4194

Merged
merged 2 commits into from
Feb 8, 2021

Conversation

lex111
Copy link
Contributor

@lex111 lex111 commented Feb 8, 2021

Motivation

Animating the top property will have some graphics performance impacts, basically animating top will trigger the browser to perform layout operations.

Instead use transform with translate3d so the operation can likely be carried out by the compositor thread with the help of the GPU.

As result, we get smoother transition (navbar hide animation) on mobiles:

Before After
ezgif com-gif-maker (15) ezgif com-gif-maker (16)

UPD: As per the discussion in tailwindlabs/tailwindcss#1380, I changed translateY to translate3d https://twitter.com/adamwathan/status/1280902295081926656

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Preview.

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@lex111 lex111 added the pr: polish This PR adds a very minor behavior improvement that users will enjoy. label Feb 8, 2021
@lex111 lex111 requested a review from slorber as a code owner February 8, 2021 14:13
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 8, 2021
@lex111 lex111 changed the title refactor(v2): switch hiding navbar via translateY instead of top refactor(v2): switch hiding navbar via transform instead of top Feb 8, 2021
@netlify
Copy link

netlify bot commented Feb 8, 2021

[V1] Deploy preview success

Built with commit 0a1e29a

https://deploy-preview-4194--docusaurus-1.netlify.app

@netlify
Copy link

netlify bot commented Feb 8, 2021

Deploy preview for docusaurus-2 ready!

Built with commit 0a1e29a

https://deploy-preview-4194--docusaurus-2.netlify.app

@github-actions
Copy link

github-actions bot commented Feb 8, 2021

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 61
🟢 Accessibility 96
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-4194--docusaurus-2.netlify.app/classic/

@github-actions
Copy link

github-actions bot commented Feb 8, 2021

Size Change: +14 B (0%)

Total Size: 156 kB

ℹ️ View Unchanged
Filename Size Change
website/build/assets/css/styles.********.css 17.6 kB 0 B
website/build/assets/js/main.********.js 109 kB +14 B (0%)
website/build/blog/2017/12/14/introducing-docusaurus/index.html 21.7 kB +1 B (0%)
website/build/docs/introduction/index.html 180 B 0 B
website/build/index.html 6.95 kB -1 B (0%)

compressed-size-action

@lex111 lex111 changed the title refactor(v2): switch hiding navbar via transform instead of top refactor(v2): use transform instead of top position for hideable navbar Feb 8, 2021
@netlify
Copy link

netlify bot commented Feb 8, 2021

[V1] Deploy preview success

Built with commit 31c57e2

https://deploy-preview-4194--docusaurus-1.netlify.app

@netlify
Copy link

netlify bot commented Feb 8, 2021

Deploy preview for docusaurus-2 ready!

Built with commit 31c57e2

https://deploy-preview-4194--docusaurus-2.netlify.app

@slorber
Copy link
Collaborator

slorber commented Feb 8, 2021

LGTM 👍

@slorber slorber merged commit 174b420 into master Feb 8, 2021
@slorber
Copy link
Collaborator

slorber commented Feb 8, 2021

oh :'( merged too fast

it seems it broke the hamburger menu in production

image

Let me know if you want to fix it, otherwise, I'll do it before the end of the day (or revert)

@lex111 lex111 deleted the lex111/hideable-navbar-transform branch February 19, 2021 18:20
@lex111 lex111 added this to the v2.0.0-alpha.71 milestone Mar 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: polish This PR adds a very minor behavior improvement that users will enjoy.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants