Form label animation shake in webkit / safari

[haveanicedavid]

In safari, there’s a shake in the form label when the input gains focus:

Compared to Chrome (where it doesnt happen):

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]

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]

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