Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#19370 closed defect (bug) (fixed)

Default 'Search' input on Toolbar is off by about 6pixels on Safari

Reported by: ipstenu's profile Ipstenu Owned by: koopersmith's profile koopersmith
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: Toolbar Keywords: has-patch needs-testing
Focuses: Cc:

Description

If you enter text, it's fine, but if you look at the blank entry, it's clearly off.

http://f.cl.ly/items/060U0Y2x3u1M2Y173k0i/Screen%20Shot%202011-11-27%20at%20%2027%20Nov%20-%2010.06.45%20AM.png

vs

http://f.cl.ly/items/1F3s102m0r0C2j0F3H11/Screen%20Shot%202011-11-27%20at%20%2027%20Nov%20-%2010.07.46%20AM.png

Attachments (11)

19370.patch (405 bytes) - added by SergeyBiryukov 12 years ago.
19370.search-icon.png (5.2 KB) - added by SergeyBiryukov 12 years ago.
19370.input.diff (964 bytes) - added by koopersmith 12 years ago.
19370.input-firefox.png (3.4 KB) - added by SergeyBiryukov 12 years ago.
19370.input-opera.png (3.1 KB) - added by SergeyBiryukov 12 years ago.
19370.input-chrome.png (3.3 KB) - added by SergeyBiryukov 12 years ago.
19370.search-icon.patch (505 bytes) - added by SergeyBiryukov 12 years ago.
19370.search-icon-2.png (3.3 KB) - added by SergeyBiryukov 12 years ago.
19370.icon-only.diff (1.2 KB) - added by koopersmith 12 years ago.
19370.icon-only-firefox.png (3.1 KB) - added by SergeyBiryukov 12 years ago.
19370.icon-only-ie.png (2.4 KB) - added by SergeyBiryukov 12 years ago.

Download all attachments as: .zip

Change History (21)

#1 @nacin
12 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.3

Not sure about Safari, but I also saw this with the P2 theme in general.

#2 @koopersmith
12 years ago

Confirmed using Twenty Eleven. Looking into it now.

#3 @SergeyBiryukov
12 years ago

I've looked into this the other day, and it seems that padding-top is one of the supported properties for placeholder in Safari 5: http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

However 19370.patch only works for me in Safari 5.0.3 (Windows), but not in 5.1.1.

The search icon also looks a bit off in both Safari and Chrome (see 19370.search-icon.png).

#4 @koopersmith
12 years ago

I also wrote a fix. Cross-browser support for styling the placeholder is spotty, so I attempted to adjust the input's height and padding to force the placeholder to render properly (without styling the placeholder itself).

Let's go with whichever patch supports more browsers.

On OS X, I've tested Chrome 15, Safari 5.1.1, and Firefox 6.

Firefox sadly cuts off descenders by a pixel or two, so the patch might need some tweaking.

#5 @koopersmith
12 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

#6 @SergeyBiryukov
12 years ago

19370.input.diff looks good in Firefox 8 (19370.input-firefox.png), Safari 5.0/5.1 and IE 8, but off in Opera 11 (19370.input-opera.png; the darker color also looks a bit odd) and Chrome 15 (19370.input-chrome.png).

While we're at it, thinking we could display the search icon 1px lower (19370.search-icon-2.png).

#7 @koopersmith
12 years ago

Thanks for the screenshots, Sergey, they helped immensely.

I really dislike the fact that the placeholder's baseline cannot remain consistent cross-browser.

With #19404 in mind, I've attached a patch that makes the search trigger an icon only. This solves a few problems:

  1. We don't have to worry about the placeholder.
  2. We don't have to fix the width of the menu item (which looks awkward and is currently in place because we can't predict the length of the translated placeholder string.

Another alternative would be to have the search box pop down when the item is pressed (like shortlink does now). This would prevent the expanded search item from pushing toolbar items to the next line of a crowded bar. If we go in this direction, we could optionally include text in the item as well (and avoid baseline issues).

#8 follow-up: @SergeyBiryukov
12 years ago

19370.icon-only.diff looks more consistent, but has a side effect.

If I type "test" and then click elsewhere, the input collapses, but the search text slightly peeps out and looks like an artefact in Firefox 8, Chrome 15, Opera 11, Safari 5.1 (19370.icon-only-firefox.png)

In IE 8, it looks like a stray first letter of the search text (19370.icon-only-ie.png).

#9 in reply to: ↑ 8 @koopersmith
12 years ago

Replying to SergeyBiryukov:

19370.icon-only.diff looks more consistent, but has a side effect.

If I type "test" and then click elsewhere, the input collapses, but the search text slightly peeps out...

Ah, you're right. Other browsers could probably be fixed with slightly adjusted padding, but IE looks especially ugly in this circumstance.

#10 @koopersmith
12 years ago

  • Owner set to koopersmith
  • Resolution set to fixed
  • Status changed from new to closed

In [19518]:

In toolbar, move search item to the right of the account menu and make it icon-only. fixes #19370, #19406.

Note: See TracTickets for help on using tickets.