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.

Sign up for GitHub

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

Jump to bottom

Form label animation shake in webkit / safari #17

Open
haveanicedavid opened this issue Aug 22, 2022 · 2 comments
Open

Form label animation shake in webkit / safari #17

haveanicedavid opened this issue Aug 22, 2022 · 2 comments

Comments

@haveanicedavid
Copy link

haveanicedavid commented Aug 22, 2022 •
edited

In safari, there’s a shake in the form label when the input gains focus:
CleanShot 2022-08-22 at 13 32 30

Compared to Chrome (where it doesnt happen):
CleanShot 2022-08-22 at 13 33 30

Beautiful lib of web-components! I’m very new to lit, but if there’s any way I can help troubleshoot, please let me know 😄
@kjantzer
Copy link
Owner

Interesting...

I'll be honest, I dont really ever test in Safari. Most development testing is targeted to Chrome/Edge (blink)

Seems like it's a weird css issue. Maybe could be more apparent if the animation was slowed down in dev tools?

@kjantzer
Copy link
Owner

kjantzer commented Aug 22, 2022 •
edited

Oh, looks like it might stem from animating font-size and translate at the same time, since translateY(50%) is relative to the element size

https://stackoverflow.com/a/44210637/484780

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kjantzer @haveanicedavid