WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 2 years ago

#33141 new defect (bug)

Search form clear button is clipped in Safari (OS X)

Reported by: markjaquith Owned by:
Milestone: Awaiting Review Priority: low
Severity: minor Version:
Component: General Keywords: has-patch
Focuses: ui Cc:
PR Number:

Description

Safari's search boxes have an "X" to clear the search terms. It is getting clipped. OS X.

The reason for this appears to be the padding on the search box, and that we're doing this:

input[type="search"] {
	-webkit-appearance: textfield;
}

which we HAVE to do in Safari in order to control certain aspects of the display.

https://cldup.com/J90Zt5PGQW-3000x3000.png

There is a pseudo-selector we might be able to use to fix this:

::-webkit-search-cancel-button {}

Attachments (3)

33141.diff (295 bytes) - added by mauteri 4 years ago.
Another option is to make the font-sze 14px rather than 16px (I noticed the issue on in Themes). The other search boxes in Posts, Users, etc are 14px and the "X" displays fine. Patch attached.
33141.1.diff (276 bytes) - added by mauteri 4 years ago.
Actually, removing the font-size from .themes-php .wp-filter-search may be better since it will just inherit the 14px font-size
33141.2.patch (586 bytes) - added by mauteri 4 years ago.
Just combed through the admin. Plugins -> Add New also has the 16px font size and the X is getting clipped. See updated patch. Thanks!

Download all attachments as: .zip

Change History (8)

@mauteri
4 years ago

Another option is to make the font-sze 14px rather than 16px (I noticed the issue on in Themes). The other search boxes in Posts, Users, etc are 14px and the "X" displays fine. Patch attached.

@mauteri
4 years ago

Actually, removing the font-size from .themes-php .wp-filter-search may be better since it will just inherit the 14px font-size

#1 @MikeHansenMe
4 years ago

  • Keywords has-patch added

#2 @swissspidy
4 years ago

  • Keywords ui-feedback added

+1 for standardizing on 14px as the font size for search boxes, especially when this fixes the issue.

Any other areas where the clear button is clipped even with the patch applied?

@mauteri
4 years ago

Just combed through the admin. Plugins -> Add New also has the 16px font size and the X is getting clipped. See updated patch. Thanks!

#3 @FolioVision
3 years ago

@mauteri I've checked your solution, but on some versions of Safari it doesn't solve the problem. So doesn't the pseudo selector. The only thing, that really worked across the deck was to adjust the horizontal padding of the search field to

.wp-filter .search-form input[type="search"] {
    - padding: 3px 5px;
    + padding: 3px 4px;
}

On the other hand this also means, that the general rule for input and select fields:

input, select {
    margin: 1px;
    padding: 3px 5px;
}

would have to be changed to padding: 3px 4px;

Not sure, if losing 1 pixel and breathing air on all fields is worth for one specific browser, not to speak of only some of it's older versions.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

#5 @karmatosed
2 years ago

  • Keywords ui-feedback removed

As discussed in triage this doesn't need ui-feedback.

Note: See TracTickets for help on using tickets.