Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 4 years ago

#31322 closed defect (bug) (fixed)

Admin bar frontend search CSS fixes

Reported by: afercia's profile afercia Owned by: helen's profile helen
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.1
Component: Toolbar Keywords: has-patch commit
Focuses: ui, javascript Cc:

Description

When the admin bar is displayed on the frontend, an additional search form appears on the right. The input field doesn't have an associated label (will open a separate ticket) but there are also some CSS glitches.

  • on focus: the blue lens is not shown in all browsers (appears just on hover)
  • IE8: needs some love

See screenshot before the patch:
modern browsers
IE8 search collapsed
IE8 search expanded

https://cldup.com/_SXVu_eybQ.png

Screenshot after the patch:
modern browsers
IE8 search expanded

https://cldup.com/seRrHsBWNN.png

Attachments (2)

31322.patch (3.1 KB) - added by afercia 9 years ago.
31322.2.patch (3.1 KB) - added by afercia 9 years ago.
removes an !important used while debugging

Download all attachments as: .zip

Change History (14)

@afercia
9 years ago

#1 @afercia
9 years ago

  • Keywords has-patch added

#2 @SergeyBiryukov
9 years ago

  • Milestone changed from Awaiting Review to 4.2

@afercia
9 years ago

removes an !important used while debugging

This ticket was mentioned in Slack in #core by drew. View the logs.


9 years ago

#4 @DrewAPicture
9 years ago

Patch still applies. @afercia: Can you list the browsers you've tested this fix on with the patch applied?

#5 @afercia
9 years ago

[Edit] Last Latest Firefox, last latest Chrome, IE 8 :)

Last edited 9 years ago by afercia (previous) (diff)

#6 @DrewAPicture
9 years ago

  • Keywords commit added

#7 follow-up: @helen
9 years ago

Why do we need to add that class in JS?

#8 in reply to: ↑ 7 @afercia
9 years ago

Replying to helen:

Why do we need to add that class in JS?

To correctly display the blue lens when the input field is focused.

This ticket was mentioned in Slack in #core by helen. View the logs.


9 years ago

#10 @afercia
9 years ago

To more clearly explain what this data uri image does and fixes:

#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
	/* IE8 z-index bug with transparent elements */
	background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");
}

please refer for example to http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background not sure this is still a bug in IE 9+ though, as reported on StackOverflow.
See also the screenshot below: IE 8 without the GIF and with the GIF

https://cldup.com/S8q4cBUB_C.png

Last edited 9 years ago by afercia (previous) (diff)

#11 @helen
9 years ago

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

In 32074:

Toolbar: Search item consistency for focus state and IE8.

props afercia.
fixes #31322.

#12 @a4jp.com
4 years ago

The contrast ratio is too low. Can the colors be fixed too?

Note: See TracTickets for help on using tickets.