Keyboard navigating (tab) a form field changes mysterious property to pull it into view.

• Component: UI Events
• Status: NEW ---

Live demo: http://jsfiddle.net/dNk9v/ 

1. navigate with keyboard between form fields (tab key)
2. try to anchor / fix some css/JS value to prevent the transition to be ruined
3. Remove the "overflow" property of the container, and it works fine.
4. Same transition works fine if no focus is involved (click the left tabs)
5. Remove CSS transitions and you won't notice it.

There's another bug, but that one is related to the scroll wheel.

In this case, the CSS transition (on click and on focus) is NOT aware that the browser ALREADY scrolled the form for the field to be revealed inside the container visible area, so the field ends up out of the visible area.

If the browser scrolled the top or margin-top properties, we could override it, but it just defeats the transition.

If that's on purpose as a security measure, to prevent malicious pages to make the user to click some hidden field, at least it should WAIT until transitions finish, before to decide to increment such a mysterious non-editable property. (the form moves with no control-able property) or does it? Is there any way to access that property/value/event with JS?

Could this be fixed by letting the transitions finish before to evaluate the need for moving the form field into view?

Yes, it happens in Safari as well. (Version 5.1.9 (6534.59.8))

It needed the proprietary prefix in the transition to animate. Here's the link to the updated version
http://jsfiddle.net/dNk9v/9/