| Summary: | Styled search fields (input[type=search]) are taller than they used to be | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Philippe Wittenbergh <phiw2> | ||||||||
| Component: | Forms | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Normal | CC: | ahmad.saleem792 | ||||||||
| Priority: | P2 | ||||||||||
| Version: | Safari Technology Preview | ||||||||||
| Hardware: | Unspecified | ||||||||||
| OS: | OS X 10.11 | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 276575 [details]
screenshot
Top is safari TP2
Bottom is Safari 9.1
Created attachment 468953 [details]
Safari Technology Preview 184 - Zoomed-in to make it easier to see difference
It is still reproducible in STP184.
|
Created attachment 276574 [details] test case Particularly, input[type=search] fields are taller than other text input fields given the same styling. There is a difference in height of about ~3-5px depending on the specified font-size + line-height Somehow the ::-webkit-search-cancel-button makes the field taller. It seems to inherit the font size, its box becomes taller and grows the parent box (<div pseudo="-webkit-textfield-decoration-container">). Hard to guess what exactly is going on though as the inspector in TP2 does not display the shadow DOM like it does with Safari 9.1. [ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none } seems to ‘fix’ the problem - but then I have to style the whole thing myself ] In the testcase: various form controls in a row, styling based a real world stylesheet. The search field stands out as taller.