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 unwanted children movement on project card hover #23

Merged
merged 1 commit into from
Jul 16, 2024

Conversation

ruzicic
Copy link
Contributor

@ruzicic ruzicic commented Jun 2, 2024

Hello! Love the OSS Gallery initiative and the project @steven-tey!

This PR fixes annoying children's movement when using a transform scale on an element. Notice the movement of the verified badge icon and GitHub stars icon.

It's a somewhat common issue, mentioned here, in the Tailwind CSS repo.

(1) There's no need to transition-all because we need to transition only the transformation.
(2) The addition of will-change-transform is a must here to prevent layout jumping

Before

before.mov

After

after.mov

Copy link

vercel bot commented Jun 2, 2024

@ruzicic is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

@steven-tey
Copy link
Contributor

oh wow, amazing attention to detail here! also TIL about will-change-transform – thank you for the PR @ruzicic !

@steven-tey steven-tey merged commit 5bd26ca into dubinc:main Jul 16, 2024
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants