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
Created attachment 21635 [details] Screenshot
Please attach reductions to bug reports as attachments rather than pasting the code inline.
Created attachment 21637 [details] reduction
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!
This works now.