Managing focus and moving focus from one element to another is quite important for creating accessible webpages.
At the same time the provided focus function by the browser comes with annoying shortcomings making this task a pain in the ass.
There are in essence two major problems.
1. Implicit call to scrollIntoView
If an element gains focus, the
:focus style is attached and after that it is checked, wether this element is currently in view. If not, it will be scrolled into view. This might sound as a nice built-in feature, it becomes annoying as soon as you are using animations. A demo of what happens can be seen here: https://jsfiddle.net/trixta/ab226ap9/.
As a side effect this behavior also always causes layout thrashing.
2. focus doesn’t work with visibility transitions
If an element is transitioned from visibility: hidden to visibility: visible. It is considered as visibility: hidden until the transition stops. Until then it can’t be focused. While I don’t understand why, I assume this can’t be changed for backcompat reasons anymore. However an element that is already in fact visible to the user and is transitioning to visible should be focusable. A demo that shows this problem can be seen here: https://jsfiddle.net/trixta/6racogpn/