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 Nov 18 '18

Why is your preferred programming language your go-to?

A quick write up on why I love Python and you love your go-to language!

anpos231 profile image