Problem/Motivation
Postponed on #2821525: Update normalize.css to the most recent version, which is also the issue where this was discovered. In that issue, Normalize.css was updated from 3.0.3 to 8.0.1. This rule was present in normalize.css 3.0.3 but has since been removed as they correctly concluded it was preventing access to legitimate functionality (and several libraries were overriding this rule because of it):
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
When this rule is removed in Drupal, however, it breaks styling for search inputs in Safari (and possibly other browsers) when using Seven, while Bartik and Umami are also changed, but it will require discussion before we can conclude if it's an acceptable change. Examples:
Bartik
With search cancel hidden, it looks like we expect

With search cancel not hidden

Seven
Is more subtle, but still changes things:
With search cancel hidden

With search cancel not hidden, the button and input top/bottom are no longer perfectly aligned

Umami
The version with the rule removed is on top. The input is slightly taller and the cancel button is slightly not aligned with the search button text.

Claro
The version with the rule removed is on the left -- the input is slightly wider as a result.

Because of these styling changes, this rule has been added back to all core themes despite its removal in normalize.css. Ideally, this rule should not be present as the search cancel button is functionality users should have access to.
Proposed resolution
- Remove instances of the rule mentioned above (it will be accompanied by a @todo for this issue).
- Correct any styling differences that can be categorized as problems due to this un-hiding the webkit search cancel button. It's possible some of these will be considered acceptable changes.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
The webkit search cancel button was previously not displayed by core themes. This button is now displayed and will appear in the search input when text is entered when viewed by a webkit browser that supports this functionality.
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | after.png | 25.54 KB | rinku jacob 13 |
| #13 | before.png | 23.49 KB | rinku jacob 13 |
| #9 | Screenshot 2021-02-10 at 16.32.47.png | 11.45 KB | gauravvvv |
| #9 | 3114878-9.patch | 909 bytes | gauravvvv |
| #3 | claro-changes.png | 64.5 KB | bnjmnm |
Comments
Comment #2
bnjmnmComment #3
bnjmnmComment #4
bnjmnmComment #5
bnjmnmComment #6
bnjmnmComment #7
xjmThe blocker is in.
This would be a minor-only change. Since 8.9.x and 9.0.x are now in beta, I'm moving this to 9.1.x. Thanks!
Comment #9
gauravvvv commentedHere I have provided a patch please verify if it is working or not. Adding an after patch screenshot for reference.
Comment #10
gauravvvv commentedComment #11
gauravvvv commentedThe input type search has a height of 32px when we have a cancel button and when we remove this the height decreased to 26px.
Because the cancel button has padding,The height of the search icon button is also 26px, I have increased the height of the search button to 32px. Another proposed solution may be, we can remove the padding of the cancel button and set the height of the search icon to its initial.Please review.
Comment #13
rinku jacob 13 commentedi have applied the patch #9.successfully applied for drupal 9.3.x-dev thank's @Gauravmahlawat
Comment #16
lauriiiThis is a duplicate of #3309317: Remove normalize-fixes.css.