Created attachment 253719 [details] Animated GIF of the problem https://bugs.webkit.org/show_bug.cgi?id=20807 would solve our problem, but I don’t see any progress there.
<rdar://problem/21109008>
Created attachment 253721 [details] [Image] Native input has rounded outline There are at least two ways of fixing this: 1. Use native <input type=search> as it does have a rounded outline. Unfortunately, changing it’s hight via CSS isn't possible with the hight property – only with font-size. Also, we can’t change border colors.
2. Use box-shadow and make it look like outline. http://stackoverflow.com/a/14896315/16185
Created attachment 253731 [details] Patch
Created attachment 253733 [details] [Animated GIF] With the patch applied
Comment on attachment 253731 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=253731&action=review > Source/WebInspectorUI/UserInterface/Views/Toolbar.css:121 > + box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 7px hsla(211, 96%, 48%, 0); I think the system animates from a much larger size than 7px. Maybe even 15px.
Created attachment 253740 [details] [Image] Native outline radius (In reply to comment #6) > Comment on attachment 253731 [details] > Patch > > View in context: > https://bugs.webkit.org/attachment.cgi?id=253731&action=review > > > Source/WebInspectorUI/UserInterface/Views/Toolbar.css:121 > > + box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 7px hsla(211, 96%, 48%, 0); > > I think the system animates from a much larger size than 7px. Maybe even > 15px. I measured it, it’s 24px. However, in Web Inspector I have two constrains: 1. box-shadow can be clipped by a parent element with overflow hidden. In our case it’s Web Inspector toolbar. 2. CSS transition/animations don't allow animating box shadow color separately from its radius, which needs to be done to match the native behavior.
(In reply to comment #7) > Created attachment 253740 [details] > [Image] Native outline radius > > (In reply to comment #6) > 2. CSS transition/animations don't allow animating box shadow color > separately from its radius, which needs to be done to match the native > behavior. To clarify, I need to use two different timing function for box shadow color and box shadow spread radius, which isn’t possible.
Comment on attachment 253731 [details] Patch Okay, makes sense. This is clearly better than before.
Comment on attachment 253731 [details] Patch Clearing flags on attachment: 253731 Committed r184877: <http://trac.webkit.org/changeset/184877>
All reviewed patches have been landed. Closing bug.