First, preventing defaults on focus doesn't work, and preventing defaults on keydown still fails for the first field focus (with tab). As explained below.

A form partially hidden inside a container with overflow:hidden SCROLLS to make the field visible, RUINING the css animation I setup specifically to reveal it. If i remove the overflow property it works like charm.

Is that a chrome bug? jQuery limitation? or what?

I made an live example at  http://jsfiddle.net/dNk9v/

I used jQuery only to change the parent's class, and depending on that class, a top-margin is added to review the right field.

The problem is:

Before the animation occurs, the form is pseudo-scrolled to reveal the field, but there's NO actual property changed that I can fix/force. Nothing changes: Top, top-margin, padding, NOTHING, but the form STILL scrolls!

I also tried to get rid of the click events and just fire the class change (what makes the form to animate inside the container) with the field's .focus() event, but the jump always happens BEFORE the css animation.

Then, I made EVERYTHING animated by jQuery, preventing the default focus events and and firing them manually with the TAB keydown AFTER the animation, but the first event STILL jumps to the field, rather than animating. 

So so far all the methods fail, and the cleanest method (if it worked) would be the CSS animation, just changing the class of the parent.

Any ideas?