Click inside the username input box for focus.
Notice the blue highlighted odd shape surrounding the input box
III Conclusion: The <input> field uses a background image (which is a rectangle) to simulate an actual input field. Then in the styles of the input field, they have defined a line-height of 33px - which causes the issue. When you set the focus to the input field, the height that spans the blue highlight in Safari around the input field is actually the number of pixels specified in the line-height property.
IV Other browsers:
V Nightly tested: 30881
Created attachment 19641 [details]
Created attachment 19642 [details]
Created attachment 19643 [details]
even reduced test case
Confirmed a bug. The issue is side effect of setting line-height for input box.
I've noticed that sometimes Webkit "refuses" to show the issue. Try to click a couple of times outside and inside input box until the strange focus ring appears ;)
Verified and tested . Its working.
*** This bug has been marked as a duplicate of bug 17619 ***