Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#26348 closed defect (bug) (fixed)

IE8 - Login Page Issues

Reported by: bpetty's profile bpetty Owned by: iammattthomas's profile iammattthomas
Milestone: 3.8 Priority: high
Severity: normal Version: 3.8
Component: Administration Keywords: commit has-patch
Focuses: ui Cc:


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)

Attachments (4)

26348.diff (1.3 KB) - added by dd32 11 years ago.
26348-1.diff (1.3 KB) - added by iammattthomas 11 years ago.
Proposed solution for invisible characters in ≤IE8 password field.
26348.2.patch (1.7 KB) - added by ocean90 11 years ago.
26348.3.patch (1.8 KB) - added by SergeyBiryukov 11 years ago.

Download all attachments as: .zip

Change History (18)

#1 @samuelsidler
11 years ago

  • Keywords ui-focus added
  • Priority changed from normal to high

#2 @mindctrl
11 years ago

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.

There were other concerns with using Open Sans here:

IE8 doesn't support SVG, so a fallback is needed if it needs to be supported.

#3 @dd32
11 years ago

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 &

11 years ago

#4 @iammattthomas
11 years ago

  • Owner set to iammattthomas
  • Status changed from new to assigned

#5 @iammattthomas
11 years ago

In 26527:

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

#6 @iammattthomas
11 years ago

In r26527 I've used this technique for providing PNG fallbacks for SVGs:

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.

11 years ago

Proposed solution for invisible characters in ≤IE8 password field.

#7 @iammattthomas
11 years ago

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. :)

#8 @georgestephanis
11 years ago

  • Keywords commit has-patch added

Works for me in an IE8/XP virtual machine.

#9 @iammattthomas
11 years ago

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.

11 years ago

#10 @SergeyBiryukov
11 years ago

Tested 26348.2.patch with IE8.

Reduces the height of the password field, but looks good otherwise:

#11 @SergeyBiryukov
11 years ago

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

#12 @iammattthomas
11 years ago

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

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.

#13 @iammattthomas
11 years ago

Missed props to ocean90, sorry about that. :)

#14 @iammattthomas
11 years ago

In 26823:

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

Note: See TracTickets for help on using tickets.