Bug 17751 - focus ring on an input control looks odd and changes shape when you start typing in the input
Summary: focus ring on an input control looks odd and changes shape when you start typ...
Status: RESOLVED DUPLICATE of bug 17619
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: https://www.circuitcityrewards.com/Lo...
Keywords: HasReduction
Depends on:
Reported: 2008-03-10 13:28 PDT by jasneet
Modified: 2013-12-23 22:10 PST (History)
3 users (show)

See Also:

screenshot (96.92 KB, image/jpeg)
2008-03-10 13:28 PDT, jasneet
no flags Details
reduction (496 bytes, text/html)
2008-03-10 13:31 PDT, jasneet
no flags Details
even reduced test case (156 bytes, text/html)
2008-03-10 13:47 PDT, Robert Blaut
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description jasneet 2008-03-10 13:28:00 PDT
I Steps:
Go to
Click inside the username input box for focus.

II Issue:
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:
IE6: ok
FF2: ok
Opera: ok

V Nightly tested: 30881
Comment 1 jasneet 2008-03-10 13:28:48 PDT
Created attachment 19641 [details]
Comment 2 jasneet 2008-03-10 13:31:25 PDT
Created attachment 19642 [details]
Comment 3 Robert Blaut 2008-03-10 13:47:13 PDT
Created attachment 19643 [details]
even reduced test case

Confirmed a bug. The issue is side effect of setting line-height for input box.
Comment 4 Robert Blaut 2008-03-10 13:59:46 PDT
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 ;)
Comment 5 gur.trio 2013-12-23 22:10:22 PST
Verified and tested . Its working.

*** This bug has been marked as a duplicate of bug 17619 ***