IE8 - Login Page Issues

[bpetty]

Just a couple issues I thought would be worth pointing out in regards to IE8 support on the new admin login page. Since the merge of [26072] (MP6), these both appear to be an issue:

• The password field character indicators no longer display. (important)
• The logo was switched to SVG, so that no longer shows either. (maybe minor)

[mindctrl]

I've seen the password field issue before in IE8. I've never dug very deeply into it, but I know it's font related. Just did a quick search and found others having this issue too, and "solving" it by changing the font face.

​http://stackoverflow.com/questions/12199471/passwords-showing-up-as-white-or-not-at-all-in-ie
​http://martineau.tv/blog/2013/05/hidden-characters-in-password-inputs/

There were other concerns with using Open Sans here: ​http://make.wordpress.org/core/2013/11/11/open-sans-bundling-vs-linking/

IE8 doesn't support SVG, so a fallback is needed if it needs to be supported. ​http://caniuse.com/#feat=svg

[dd32]

I tried to convert the login logo to a Dashicon which would be supported by IE8.
The Logo's in Dashicons are designed for smaller screens, so the lines are much thicker than the svg logo we're currently using, see 26348.diff​ & ​https://cloudup.com/cWFaFSVZPXr

[iammattthomas]

In 26527:

Adding a SVG > PNG fallback for IE8 support. See #26348.

[iammattthomas]

In r26527 I've used this technique for providing PNG fallbacks for SVGs: ​http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images

Being a CSS-only solution this seemed like the simplest way to provide IE8 support. The default Browser app in Android 2.3 also lacks SVG support, and this workaround doesn't work on Android, but I think we can live without the logo on that particular browser.

A solution for the password field font is coming separately as a patch.

[iammattthomas]

Proposed solution for invisible characters in ≤IE8 password field.

[iammattthomas]

The diff I just uploaded fixes the described issue with password fields in IE8 and below by specifying the browser default sans-serif font for password inputs. I added this as a diff instead of committing it directly for a couple of reasons:

• The current logic that loads ie.css only does so for IE7 and below, but this rule is needed for IE8
• The ie.css stylesheet isn't currently loaded at all on wp-login
• I don't know enough about PHP to know whether there's a better way to do this. :)

[georgestephanis]

Works for me in an IE8/XP virtual machine.

[iammattthomas]

ocean90 mentioned problems with bumping the entire ie.css to IE8, and nacin mentioned there's a way to conditionally load something just for IE8 already in core (I think that's what I understood). So my patch just needs some massaging so that it's the only bit of CSS applied to all browsers IE8 and below.

[SergeyBiryukov]

Tested 26348.2.patch​ with IE8.

Reduces the height of the password field, but looks good otherwise: ​http://cl.ly/image/2H271d322f18.

[SergeyBiryukov]

26348.3.patch​ also resets font-family for the Username field, if we want the height of both fields to be consistent.

[iammattthomas]

In 26583:

Reset the login form inputs to the standard sans-serif font in IE8 to prevent invisible password field inputs when webfonts are used. Fixes #26348, props SergeyBiryukov, iammattthomas.

[iammattthomas]

Missed props to ocean90, sorry about that. :)

[iammattthomas]

In 26823:

Provide an SVG > PNG fallback for the WordPress logo on readme.html. See #26348.