RESOLVED DUPLICATE of bug 17619 17751
focus ring on an input control looks odd and changes shape when you start typing in the input
https://bugs.webkit.org/show_bug.cgi?id=17751
Summary focus ring on an input control looks odd and changes shape when you start typ...
jasneet
Reported 2008-03-10 13:28:00 PDT
I Steps: Go to https://www.circuitcityrewards.com/Login.aspx 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
Attachments
screenshot (96.92 KB, image/jpeg)
2008-03-10 13:28 PDT, jasneet
no flags
reduction (496 bytes, text/html)
2008-03-10 13:31 PDT, jasneet
no flags
even reduced test case (156 bytes, text/html)
2008-03-10 13:47 PDT, Robert Blaut
no flags
jasneet
Comment 1 2008-03-10 13:28:48 PDT
Created attachment 19641 [details] screenshot
jasneet
Comment 2 2008-03-10 13:31:25 PDT
Created attachment 19642 [details] reduction
Robert Blaut
Comment 3 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.
Robert Blaut
Comment 4 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 ;)
gur.trio
Comment 5 2013-12-23 22:10:22 PST
Verified and tested . Its working. *** This bug has been marked as a duplicate of bug 17619 ***
Note You need to log in before you can comment on or make changes to this bug.