Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#26369 closed defect (bug) (fixed)

Missing icons in browsers that don't support web fonts (IE7, IE9 Mobile, Opera Mini)

Reported by: celloexpressions's profile celloexpressions Owned by: azaozz's profile azaozz
Milestone: 3.8 Priority: high
Severity: major Version: 3.8
Component: Administration Keywords: needs-patch dev-feedback
Focuses: Cc:

Description

Dashicons don't work on IE9 Mobile, which is the only browser available on Windows Phone 7 devices. Apparently IE9 Mobile does not support web fonts.

We need to either provide fallback PNGs for the most critical icons (such as the menu-toggle) or officially drop support for IE9 Mobile, which otherwise works. I don't think we can say we support this browser without at least some icons because there is no indication of how to access the admin menu and TinyMCE is unusable.

Attachments (12)

WP7_Dashboard.jpg (222.7 KB) - added by celloexpressions 11 years ago.
Screen-picture (no screenshots in WP7) of Dashboard in Windows Phone 7 / IE9 Mobile
WP7_New_Post.jpg (87.0 KB) - added by celloexpressions 11 years ago.
Add New Post screen in Windows Phone 7 / IE9 Mobile
26369.patch (853 bytes) - added by azaozz 11 years ago.
26369.2.patch (1.5 KB) - added by azaozz 11 years ago.
26369.3.patch (3.0 KB) - added by azaozz 11 years ago.
26369.4.patch (13.9 KB) - added by azaozz 11 years ago.
26369.5.patch (14.0 KB) - added by azaozz 11 years ago.
26369-ie.css.patch (10.3 KB) - added by azaozz 11 years ago.
26369.6.patch (14.1 KB) - added by azaozz 11 years ago.
26369-ie.css.2.patch (10.7 KB) - added by azaozz 11 years ago.
26369.7.patch (16.1 KB) - added by azaozz 11 years ago.
no-font-face.png (6.0 KB) - added by azaozz 11 years ago.

Download all attachments as: .zip

Change History (44)

@celloexpressions
11 years ago

Screen-picture (no screenshots in WP7) of Dashboard in Windows Phone 7 / IE9 Mobile

@celloexpressions
11 years ago

Add New Post screen in Windows Phone 7 / IE9 Mobile

#1 @celloexpressions
11 years ago

  • Keywords needs-patch added
  • Severity changed from normal to major

Previously: #23985.

#2 follow-up: @SergeyBiryukov
11 years ago

  • Milestone changed from Awaiting Review to 3.8

Related: #26377

#3 in reply to: ↑ 2 @celloexpressions
11 years ago

Replying to SergeyBiryukov:

Related: #26377

And note that since this is the only browser available on Windows Phone 7, we need to actually do something about it (or drop support for the device), unlike with Opera Mini. Ie, Browse Happy isn't helpful. These devices are very much still around and in use.

#4 @nacin
11 years ago

  • Priority changed from normal to high

And note that since this is the only browser available on Windows Phone 7, we need to actually do something about it (or drop support for the device)

We need to figure out something here.

#5 @azaozz
11 years ago

Was talking about this with @iammattthomas yesterday: need to add detection of browsers that don't support @font-face. Modernizr has some code that apparently fails (false positive) on Win phone 7 (https://github.com/Modernizr/Modernizr/issues/538). So seems we will need to do UA sniffing.

@azaozz
11 years ago

#6 @azaozz
11 years ago

In 26369.patch: JS based test for browsers that don't support @font-face. Adds a class no-font-face to the html element.

Edit: this may be better as a PHP based test that adds the class on the body.

Last edited 11 years ago by azaozz (previous) (diff)

#7 @matt
11 years ago

Isn't it better to test capabilities than user agents?

#8 @azaozz
11 years ago

As much as I could find out, the capability test fails with false positive for several browsers (IEMobile 9, Android 2.1, etc.).

#9 @toscho
11 years ago

  • Cc info@… added

@azaozz
11 years ago

#10 @azaozz
11 years ago

Thinking this should be left for 3.9. Even when adding a CSS class for devices that don't support @font-face, most of admin-bar.css has to be reverted and rebuild to once again support image icons.

Version 1, edited 11 years ago by azaozz (previous) (next) (diff)

#11 @nacin
11 years ago

As pointed out by MarkJaquith, Microsoft is dropping support for WP7 in September. But, it still kinda sucks to render the toolbar so useless for the only browser on those devices. If we can't avoid targeting them for the responsive CSS somehow, heck, I'd rather just hide the toolbar entirely for them.

I'm not against a wontfix, but it doesn't hurt to see what a cheap patch could look like. I don't think we need to deal with image icons, or anything like that. The aim at this point should be minimally functional, not pretty. I don't care if it is just .no-font-face span.label { display: inline !important }. (Or, as said above, .no-font-face #wpadminbar { display: none }.)

#12 @nacin
11 years ago

#26377 was marked as a duplicate.

#13 @nacin
11 years ago

  • Summary changed from IE9 Mobile is Icon-less to Missing icons in browsers that don't support web fonts (IE9 Mobile, Opera Mini)

#14 @nacin
11 years ago

  • Keywords dev-feedback added

Manpower appreciated. :-)

@azaozz
11 years ago

#15 @azaozz
11 years ago

26369.3.patch is "half-way" for testing, covers only the toolbar.

@azaozz
11 years ago

#16 @azaozz
11 years ago

In 26369.4.patch, when no @font-face support:

  • Editor: show the old button icons.
  • Admin menu: hide the icon divs, the menu is quite usable.
  • Toolbar: add spans with the same text as the titles to the top level items and show them (overflow: hidden).

#17 @celloexpressions
11 years ago

26369.4.patch is a good start, except the toolbar part isn't working (still looks unchanged).

Here's a quick list of icon-placeholders we can hide (since WP7 shows rectangles in their place, and not important enough for fallbacks):

  • post format icons on edit.php
  • add media button's icon (already has text)
  • all of the icons in the Publih metabox
  • post format metabox icons
  • click-to-add widget checkmark

Icons that we need fallbacks for:

  • Expand/collapse icons on metaboxes
  • x's (for example, in the tags metabox)
  • close icon for the media modal (not that it's particularly usable)
  • image editing tools
  • add new theme
  • theme details modal previous/next arrows, close icon
  • widgets expand/collapse
  • plugin update available icon (on plugins.php)

FYI things that really don't work on WP7, so don't need to bother:

  • Customizer
  • Press this

We can actually make it look fairly presentable with css tweaks at this point. In fact, I think the update'll still provide a better experience for these users than the old admin design, even with the removal of a lot of icons.

#18 @mercime
11 years ago

  • Cc mercijavier@… added

@azaozz
11 years ago

#19 @azaozz
11 years ago

...the toolbar part isn't working.

Right, was my error. The class wasn't outputted on the #wpadminbar div. 26369.5.patch fixes this and seems to work properly (replacing icons with some text) as far as I can test.

#20 @azaozz
11 years ago

  • Summary changed from Missing icons in browsers that don't support web fonts (IE9 Mobile, Opera Mini) to Missing icons in browsers that don't support web fonts (IE7, IE9 Mobile, Opera Mini)

#21 @azaozz
11 years ago

In 26369-ie.css.patch make IE7 somewhat usable.

@azaozz
11 years ago

#22 @azaozz
11 years ago

In 26369.6.patch: move the regex test for no @font-face to JS. If we go with this, the editor icons block from 26369-ie.css.patch is not needed.

Last edited 11 years ago by azaozz (previous) (diff)

#23 @ocean90
11 years ago

Can't we simply hide #wp-admin-bar-comments and #wp-admin-bar-updates if .no-font-face exists? The current string "0 comments awaiting moderation" is too long and you will see just the "0".

#24 @azaozz
11 years ago

Yeah, 0 is not that helpful, but a number there would work? In ie7 currently seeing "About Site 3 35 Add Howdy".

Last edited 11 years ago by azaozz (previous) (diff)

#25 @jtsternberg
11 years ago

Looks like a fix just landed in modernizer for the windows mobile @font-face false-positive: https://github.com/Modernizr/Modernizr/pull/1147#issuecomment-30030743

#26 @azaozz
11 years ago

In 26369-ie.css.2.patch: also set the Dashboard columns to two for IE7.

@azaozz
11 years ago

@azaozz
11 years ago

#27 @azaozz
11 years ago

In 26369.7.patch: combined the IE7 and older mobile tweaks, remove the extra span from top toolbar items. The only remaining hack is for the admin menu toggle button (the word Menu is hard-coded). On phones should look something like this:


#28 @iammattthomas
11 years ago

Tested and confirmed this works for me in IE7 on Windows XP, IE 9 mobile on Windows Phone 7, IE 10 mobile on Windows Phone 8, and IE 11 on Surface.

#29 @azaozz
11 years ago

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

In 26819:

Make older mobile browsers and IE7 usable:

  • Text labels in the toolbar.
  • Image icons in the visual editor.
  • Some IE7 structural css fixes.

Fixes #26369.

#30 follow-up: @TobiasBg
11 years ago

Is that min-width: without a property value on purpose (because it's maybe some IE hack)?
http://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/ie.css?rev=26819#L215

#31 in reply to: ↑ 30 @SergeyBiryukov
11 years ago

Replying to TobiasBg:

Is that min-width: without a property value on purpose (because it's maybe some IE hack)?

It's a typo: https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2013-12-11&sort=asc#m752053. Feel free to create a new ticket.

#32 @TobiasBg
11 years ago

Done: #26563
Thanks, Sergey!

Note: See TracTickets for help on using tickets.