When CSS line-height is more than height for a <input type="text"> element, the focus ring drawn is ugly

• Component: New Bugs
• Status: RESOLVED CONFIGURATION CHANGED

[Anantha Keesara]

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

[Anantha Keesara]

Created attachment 21635 [details]
Screenshot

[Mark Rowe (bdash)]

Please attach reductions to bug reports as attachments rather than pasting the code inline.

[Anantha Keesara]

Created attachment 21637 [details]
reduction

[Ahmad Saleem]

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!

[Ryosuke Niwa]

This works now.