Bug 19496 - When CSS line-height is more than height for a <input type="text"> element, the focus ring drawn is ugly
Summary: When CSS line-height is more than height for a <input type="text"> element, t...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2008-06-11 12:34 PDT by Anantha Keesara
Modified: 2022-07-27 11:35 PDT (History)
6 users (show)

See Also:


Attachments
Screenshot (26.10 KB, image/png)
2008-06-11 12:34 PDT, Anantha Keesara
no flags Details
reduction (999 bytes, text/html)
2008-06-11 13:05 PDT, Anantha Keesara
no flags Details
Safari 15.6 does not show "focus ring" issue but text clipping (513.49 KB, image/png)
2022-07-27 09:09 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Anantha Keesara 2008-06-11 12:34:43 PDT
I. Steps:
 -----------
 
 1. Launch Safari
 
 2. Launch the test case
 
 
 II. Issue:
 -----------------
 Focus rings drawn on <input type="text"> element is ugly when the specified line-height is more than height in CSS.
 
 .TabStrip_SearchBox {
 height:17px;
 line-height:19px;
 }
 
 <input type="text" onmousedown="onMouseDownSearch()" class="TabStrip_SearchBox" title="Search MSDN" id="stb" value="Search MSDN with Live Search" name="stb"/>
 
 PS: For some reason, the problem goes away if onmousedown event handler is removed from javascript
 
 
 
 III. Other browsers:
 -----------------------
 IE7 : Ok
 FF3 : Ok 
 Opera 9.27: Ok
 
 
 IV. Safari nightly tested: version 3.1.1(525.17 )- r34278.
 
 Not working properly on Safari.
 
 
 
 V. Safari screenshot : Avalible
Comment 1 Anantha Keesara 2008-06-11 12:34:46 PDT
Created attachment 21635 [details]
Screenshot
Comment 2 Mark Rowe (bdash) 2008-06-11 12:57:43 PDT
Please attach reductions to bug reports as attachments rather than pasting the code inline.
Comment 3 Anantha Keesara 2008-06-11 13:05:01 PDT
Created attachment 21637 [details]
reduction
Comment 4 Ahmad Saleem 2022-07-27 09:09:37 PDT
Created attachment 461249 [details]
Safari 15.6 does not show "focus ring" issue but text clipping

I am not able to reproduce the original issue this bug was intended for in Safari 15.6 on macOS and it does not show any weird focus ring issue as shown in the reference bug screenshot but it does clip text - which can be seen from this attached screenshot compared to other browsers. Just wanted to share updated status. Thanks!
Comment 5 Ryosuke Niwa 2022-07-27 11:35:56 PDT
This works now.