Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#26541 closed defect (bug) (fixed)

Themes: IE7/8 issues

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by: nacin's profile nacin
Milestone: 3.8.1 Priority: normal
Severity: normal Version: 3.8
Component: Themes Keywords: has-patch commit fixed-major
Focuses: ui Cc:

Description (last modified by SergeyBiryukov)

  1. IE8: "Theme Details" and action buttons are visible by default (http://cl.ly/image/2i1F051A2C40), and there's no way to distinguish between "Twenty Thirteen" and "Twenty Thirteen Child", etc. (as seen on the screenshot).
  1. IE8: "Theme Details" is almost indiscernible (as seen on the same screenshot).
  1. IE8: "Add New Theme" doesn't have a border (http://cl.ly/image/23042x2Z3w0Q), and is even worse on hover (http://cl.ly/image/2S1j2Y0Y1u3S).
  1. IE7: "Add New Theme" just floats in space by itself (http://cl.ly/SuNQ).

Attachments (9)

26541-1.diff (668 bytes) - added by morganestes 11 years ago.
Fixes problems 1 & 2
26541-2.diff (873 bytes) - added by morganestes 11 years ago.
Fixes problems 3 & 4
26541-3.diff (1.8 KB) - added by morganestes 11 years ago.
Combined fix for all 4 reported problems
26541-3.2.diff (2.0 KB) - added by morganestes 11 years ago.
26541-4.diff (507 bytes) - added by morganestes 11 years ago.
Display 3 themes across
26541-5.diff (381 bytes) - added by morganestes 11 years ago.
Remove unneeded rule for IE
themes 2-across.png (220.1 KB) - added by morganestes 11 years ago.
Screenshot showing themes only displaying 2 instead of 3
26541.diff (2.0 KB) - added by nacin 11 years ago.
Combined patch for I think everything.
26541.1.diff (2.5 KB) - added by matveb 11 years ago.

Download all attachments as: .zip

Change History (22)

#1 @SergeyBiryukov
11 years ago

  • Description modified (diff)

#2 @nacin
11 years ago

  • Milestone changed from 3.8 to 3.8.1

@morganestes
11 years ago

Fixes problems 1 & 2

#3 @morganestes
11 years ago

  • Keywords ui-feedback added

So for points 1 & 2, the problem is that IE8 doesn't play nice with opacity in CSS. The ie.css stylesheet that's loaded for IE7 and below just does away with the "Theme Details" text altogether.

This can be fixed by adding -ms-filter with a fallback background, but does this go in wp-admin.css, or do IE8-specific fixes belong in their own stylesheets?

@morganestes
11 years ago

Fixes problems 3 & 4

#4 @morganestes
11 years ago

  • Keywords has-patch added

Problems 3 & 4 are another result of IE8 not handling opacity cleanly, and of its inability to properly render the stacked pseudo-elements :hover:after to change the background.

The 2nd patch here adds the dashed border so the "Add New Theme" looks like it belongs, and forces IE8 to render the changed background color on hover.

There's not much I can do about the border-radius to make it all nice and round, but it's 3 versions old so I think it'll do.

@morganestes
11 years ago

Combined fix for all 4 reported problems

#5 @morganestes
11 years ago

Sorry, the first patch is only for problem 2. I misread problem 1, but it's still related to opacity.

I've added a new patch that combines fixes for all 4 problems. It still feels hacky to me to have them in there, but we have other vendor prefixes so maybe it's not so bad.

#6 in reply to: ↑ description @morganestes
11 years ago

There still is an issue with IE8 only showing two themes across on a wide monitor that should be addressed. IE7 displays them properly since the width and margins are different. Changing the main wp-admin.css to the same values that already work in IE still displays the themes properly and allows us to remove another rule from ie.css.

See patches -4 & -5.

@morganestes
11 years ago

Display 3 themes across

@morganestes
11 years ago

Remove unneeded rule for IE

@morganestes
11 years ago

Screenshot showing themes only displaying 2 instead of 3

#7 @nacin
11 years ago

matveb and I spent quite a bit of time on widths, gutters, and responsiveness for this screen, so I'd rather avoid making adjustments to all browsers just to deal with IE8 or lower. We have an .ie8 body class we can use to work around these. Working up a patch.

@nacin
11 years ago

Combined patch for I think everything.

#8 @nacin
11 years ago

  • Keywords commit added; ui-feedback removed

I have matveb looking at the latest patch. Marking for tentative commit awaiting final feedback.

@matveb
11 years ago

#9 @matveb
11 years ago

Patch above also adds a solid background fallback to the overlay backdrop and adjust some colors a bit more.

#10 @nacin
11 years ago

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

In 27007:

Themes screen: Various IE8 adjustments and fixes.

props morganestes, matveb.
fixes #26541.

#11 @nacin
11 years ago

  • Keywords fixed-major added

#12 @nacin
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#13 @nacin
11 years ago

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

In 27008:

Themes screen: Various IE8 adjustments and fixes.

Merges [27007] to the 3.8 branch.

props morganestes, matveb.
fixes #26541.

Note: See TracTickets for help on using tickets.