Bug 17751

Summary:

focus ring on an input control looks odd and changes shape when you start typing in the input

Product:

WebKit

Reporter:

jasneet <jasneet>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

gur.trio, jasneet, webkit

Priority:

Keywords:

HasReduction

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

URL:

https://www.circuitcityrewards.com/Login.aspx

Attachments:

Description	Flags
screenshot	none
reduction	none
even reduced test case	none

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	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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

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.