WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 5 months ago

#26933 closed defect (bug) (fixed)

Toolbar "Howdy, " message CSS broke in IE

Reported by: bhwebworks Owned by: sabernhardt
Milestone: 5.8 Priority: normal
Severity: normal Version: 3.8
Component: Toolbar Keywords: has-patch
Focuses: ui, css Cc:

Description

I noticed this when helping a client with their website, and they were using IE 9. The "Howdy, " message forces their display name down to the next line, causing problems if they try to click the "Screen Options" or "Help" tabs. Plus it just looks bad. (see attached screenshot)

I logged in with IE 11 and saw the same issue, and I chased the bug down to wp-includes/css/admin-bar.css, line 126.

#wpadminbar .quicklinks a,
#wpadminbar .quicklinks .ab-empty-item,
#wpadminbar .shortlink-input {
	height: 32px;
	display: block;
	padding: 0 10px;
	margin: 0;
}

If you change display to inline-block rather than block, it fixes the problem.

Looks like the same code is in admin-bar-rtl.css, and I'm assuming that would have the same issue, but I don't know for sure.

Attachments (5)

howdy in ie11.JPG (11.2 KB) - added by bhwebworks 8 years ago.
Screenshot of IE toolbar "Howdy" message issue
admin-bar.css.patch (404 bytes) - added by 5um17 8 years ago.
26933.2.patch (394 bytes) - added by 5um17 6 years ago.
Patch with overflow: hidden
26933.3.patch (433 bytes) - added by sabernhardt 13 months ago.
display:inline-block only when avatars are not shown
26933.4.diff (448 bytes) - added by audrasjb 5 months ago.
patch refreshed against trunk

Download all attachments as: .zip

Change History (26)

@bhwebworks
8 years ago

Screenshot of IE toolbar "Howdy" message issue

#1 @bhwebworks
8 years ago

Suggested code change:

#wpadminbar .quicklinks a,
#wpadminbar .quicklinks .ab-empty-item,
#wpadminbar .shortlink-input {
	height: 32px;
	display: inline-block;
	padding: 0 10px;
	margin: 0;
}

#2 @SergeyBiryukov
8 years ago

  • Keywords reporter-feedback added

Could not reproduce the issue on a clean install neither in IE8 nor IE11. Tried both 3.8.1 and current trunk.

Does it still happen with all plugins disabled and a default theme (Twenty Fourteen or Twenty Thirteen) activated?

#3 @bhwebworks
8 years ago

After further research I found that it's only happening on a few of my sites. I disabled plugins but I didn't go so far as to switch to a default theme.

What I did notice is that it was only happening on sites that were loading (enqueueing) farbtastic.css and media-views.css in the admin.

I wasn't able to determine what those styles had to do with this though.

I do some admin CSS tweaking on my sites, so I just added the fix I mentioned above to that stylesheet, specifically changing display to inline-block, and it's "fixed" for me now.

#4 @SergeyBiryukov
8 years ago

  • Focuses ui added
  • Version changed from trunk to 3.8

#5 @jeremyalzona
8 years ago

#27809 was marked as a duplicate.

#6 @5um17
8 years ago

This only happen in IE when Avatars are disabled. Seems like text is being wrapped around the floated user icon instead of being wide.
In place of adding inline-block to all elements, i made inline-block to this element only, it will not effect on other browsers as it is a floated element and this fix the problem in IE.

@5um17
8 years ago

#7 @chriscct7
6 years ago

  • Keywords has-patch added; reporter-feedback removed

#8 @5um17
6 years ago

Updating patch in favor of better approach to handle this IE bug. Actually IE is not respecting floated icons thus having width: auto only expend the div to fit the text but not the icon.

In this case we can also add overflow: hidden; to a tag, which will not reflect any change on other browsers.

@5um17
6 years ago

Patch with overflow: hidden

#9 @swissspidy
5 years ago

  • Keywords reporter-feedback needs-testing added

Is this still an issue with latest versions of WordPress and Internet Explorer?

#10 @sabernhardt
13 months ago

#40374 was marked as a duplicate.

@sabernhardt
13 months ago

display:inline-block only when avatars are not shown

#11 @sabernhardt
13 months ago

  • Focuses css added
  • Keywords reporter-feedback removed

It does still wrap in IE. I had uploaded two options with absolute positioning to ticket #40374, but adding display: inline-block works for me.

In 26933.3.patch, the display property is adjusted only when there is no avatar image.

#12 @desrosj
11 months ago

@sabernhardt Can you clarify which versions of IE you are able to reproduce this issue in? WordPress currently only supports IE >= 11. If the issues is only in versions 10 and lower, we should close as a wontfix.

#13 @sabernhardt
11 months ago

  • Milestone changed from Awaiting Review to Future Release

@desrosj I only have version 11, so yes, it does still happen with the latest version of IE (and WordPress 5.6 trunk).

Last edited 11 months ago by sabernhardt (previous) (diff)

#14 @sabernhardt
7 months ago

  • Milestone changed from Future Release to 5.8

While Internet Explorer 11 will not be supported soon, this bug is on the front end, too.

If the patch doesn't make the experience worse in any other browser(s), I think it's still worth considering for the next major version. (If it's not committed for 5.8, though, we probably ought to close the ticket as "won't fix")

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


7 months ago

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


6 months ago

#17 @Boniu91
6 months ago

  • Keywords needs-testing removed

Worked as expected. Tested with:
-IE11
-Chrome
-Firefox

No regressions.

#18 @sabernhardt
6 months ago

  • Owner set to sabernhardt
  • Status changed from new to accepted

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


5 months ago

@audrasjb
5 months ago

patch refreshed against trunk

#20 @audrasjb
5 months ago

Last patch refreshed against trunk (it didn't apply cleanly anymore). Tested on Mac OSX as per @sabernhardt’s comment on Core devchat today: I didn't see any apparent issue.

#21 @ryelle
5 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 51004:

Toolbar: Prevent username from wrapping when avatars are disabled.

In IE11, the floated icon causes the "Howdy, username" to wrap to a second line, preventing access to help tabs and possibly affecting the frontend. Changing the display fixes the layout, and prevents the wrap.

Props bhwebworks, 5um17, sabernhardt, boniu91, audrasjb.
Fixes #26933.

Note: See TracTickets for help on using tickets.