Firefox button height transition bug fix?
For some reason my css works fine in chrome, but in firefox I get this weird bug causing the button to weirdly stretch vertically.
https://codepen.io/23chromosomes/pen/jOoqLwV
5 Replies
Any reason what might cause this weird behviour in firefox?
Firefox seems to need a default state for the transform to transition smoothly. Adding a
transform: translateY(0); on button smooths things out for me. Also understand that .1rem computes out to 1.6px which means subpixel rendering which is always a bit janky on the web. Last thing is make sure you are only calling out the things you want to transition in the transition short hand. all is tempting but it prepares the browser to do a lot more than you probably need.By body root is 10px in my real site as 1rem.
Thank you, will try to apply this to fix it.
Seems to have solved the issue, thank you.
That might be bad for accessibility. Do you mean you set the font size to 10px on the root or 0.625%?
62.5%