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.

Comments

bnjmnm created an issue. See original summary.

bnjmnm’s picture

Status: Active » Postponed
bnjmnm’s picture

Issue summary: View changes
StatusFileSize
new49.1 KB
new64.5 KB
bnjmnm’s picture

Issue summary: View changes
bnjmnm’s picture

Issue summary: View changes
bnjmnm’s picture

xjm’s picture

Title: [PP-1 ]The webkit search cancel button should not be hidden » The webkit search cancel button should not be hidden
Version: 9.0.x-dev » 9.1.x-dev
Status: Postponed » Active

The 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!

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

gauravvvv’s picture

StatusFileSize
new909 bytes
new11.45 KB

Here I have provided a patch please verify if it is working or not. Adding an after patch screenshot for reference.

gauravvvv’s picture

Status: Active » Needs review
gauravvvv’s picture

The 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.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

rinku jacob 13’s picture

StatusFileSize
new23.49 KB
new25.54 KB

i have applied the patch #9.successfully applied for drupal 9.3.x-dev thank's @Gauravmahlawat

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

lauriii’s picture

Status: Needs review » Closed (duplicate)

This is a duplicate of #3309317: Remove normalize-fixes.css.