Focusing an element makes browsers bring that element into view. This can interfere with application
specific view management, as the following (trivial) multi-column setup shows. The scrolling performed
by the browser has effect on scrollLeft
and scrollTop
, whereas applications
can mimic scrolling in a number of ways. This example uses CSS Transforms to make use of CSS Transitions.
Hit the "move" button to see how a column is revealed properly (without focus being changed). Hit "focus" and notice that nothing is happening on screen. Hit "reset", then try "focus" again, notice how the browser moves the focused element into view. Hit "reset" again and try "focus, move" and "move, focus" to see how the combination of custom view management and focus screws things up. Hit "reset" then "move, focus delayed" to see what happens when the application first manages its view state and sets focus once that's done.