Weird browser behaviour?

github logo 惻1 min read

So I was playing with a search box, I wanted it to show/hide based on the content and whether it was focused or not, but I did not want to use width property for animation. Instead I went for transform: translate and tried to hide it behind the button when not needed.

I've noticed a weird behaviour though. When I hover over the element the box seems to render properly, but when I try to tab into it, the button starts to 'jump' and if you try clicking somewhere else on the page while the animation is running, the whole thing will just freeze, with the button staying in incorrect place.

Here is the code pen: https://codepen.io/anon/pen/vwqZxR

twitter logo DISCUSS
Classic DEV Post from Jan 22

Self Care for Developers

Self care is a hot topic these days, and Iā€™m not just talking about face masks. There is a growing movement that underscores the importance of taking time to take care of yourself (in addition to all the other things that you already take time for). You can prevent problems down the road by taking proactive steps to ensure your health and happiness.

anpos231 profile image
Join dev.to

The fastest growing software community.
Free forever.