WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 8 months ago

#24194 closed defect (bug) (fixed)

Twenty Thirteen: non-responsive layout in IE8

Reported by: jrbeilke Owned by: phpmypython
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: good-first-bug has-patch commit
Focuses: accessibility Cc:

Description

Testing Twenty Thirteen with 3.6 beta and I'm getting scrollbars when resizing the window in IE8 less than 1060px wide.

Attachments (2)

twentythirteen-ie8noresponsive.jpg (140.8 KB) - added by jrbeilke 2 years ago.
Fixing_responsive_in_ie8.patch (624 bytes) - added by phpmypython 11 months ago.
diff

Download all attachments as: .zip

Change History (15)

comment:1 follow-up: @RDall2 years ago

  • Resolution set to invalid
  • Status changed from new to closed

IE8 doesn't support media queries so it can't be responsive like the theme is in other browsers.

See here: http://caniuse.com/#feat=css-mediaqueries

comment:2 @SergeyBiryukov2 years ago

  • Milestone Awaiting Review deleted

comment:3 in reply to: ↑ 1 @whyameye12 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Replying to RDall:

IE8 doesn't support media queries so it can't be responsive like the theme is in other browsers.

See here: http://caniuse.com/#feat=css-mediaqueries

While IE8 does not support media queries out-of-the-box, it does appear that the theme is intended to work responsively in IE8, as it is responsive in IE6.

You can test this yourself in Browserstack by visiting:
http://twentythirteendemo.wordpress.com/

Last edited 12 months ago by whyameye (previous) (diff)

comment:4 @obenland12 months ago

  • Milestone set to Awaiting Review
  • Version set to 3.6

comment:5 follow-up: @obenland12 months ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

It looks like it's caused by the very first style in css/ie.css. It was introduced with the initial commit.

As far as I can see, removing it shouldn't break too many things (IE7/8). A path would be trivial, but it should be tested thoroughly.

comment:6 in reply to: ↑ 5 @whyameye12 months ago

Thanks for this feedback. So far, experimenting with commenting out the line you suggest fixes the problem without causing other problems. For now to solve this I've set up a child theme which loads in the alternative ie.css with the line commented out and prevents the original ie.css from being loaded.

Replying to obenland:

It looks like it's caused by the very first style in css/ie.css. It was introduced with the initial commit.

As far as I can see, removing it shouldn't break too many things (IE7/8). A path would be trivial, but it should be tested thoroughly.

comment:7 @phpmypython11 months ago

  • Focuses accessibility added
  • Keywords has-patch added

That is the fix that needed to be added and i tested and got no problems in ie8.
Hopefully this is all that we need

comment:8 @obenland11 months ago

  • Keywords needs-testing added

comment:9 @DrewAPicture10 months ago

  • Owner set to phpmypython
  • Status changed from reopened to assigned

comment:10 @lancewillett8 months ago

  • Milestone changed from Future Release to 4.1

Let's test the patch one more time and get this fix in for 4.1.

comment:11 @zrothauser8 months ago

Tested and it's still working.

comment:12 @lancewillett8 months ago

  • Keywords commit added; needs-testing removed

comment:13 @lancewillett8 months ago

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

In 30386:

Twenty Thirteen: fix non-responsive layout in IE8. Props phpmypython, fixes #24194.

Note: See TracTickets for help on using tickets.