Bug 156671 - Styled search fields (input[type=search]) are taller than they used to be
Summary: Styled search fields (input[type=search]) are taller than they used to be
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified OS X 10.11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-04-16 22:10 PDT by Philippe Wittenbergh
Modified: 2023-12-09 05:13 PST (History)
1 user (show)

See Also:


Attachments
test case (1.20 KB, text/html)
2016-04-16 22:10 PDT, Philippe Wittenbergh
no flags Details
screenshot (58.93 KB, image/png)
2016-04-16 22:13 PDT, Philippe Wittenbergh
no flags Details
Safari Technology Preview 184 - Zoomed-in to make it easier to see difference (29.63 KB, image/png)
2023-12-09 05:13 PST, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Philippe Wittenbergh 2016-04-16 22:10:14 PDT
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.
Comment 1 Philippe Wittenbergh 2016-04-16 22:13:29 PDT
Created attachment 276575 [details]
screenshot

Top is safari TP2
Bottom is Safari 9.1
Comment 2 Ahmad Saleem 2023-12-09 05:13:01 PST
Created attachment 468953 [details]
Safari Technology Preview 184 - Zoomed-in to make it easier to see difference

It is still reproducible in STP184.