Make WordPress Core

Opened 11 years ago

Closed 9 years ago

#24194 closed defect (bug) (fixed)

Twenty Thirteen: non-responsive layout in IE8

Reported by: jrbeilke's profile jrbeilke Owned by: phpmypython's profile 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 11 years ago.
Fixing_responsive_in_ie8.patch (624 bytes) - added by phpmypython 10 years ago.
diff

Download all attachments as: .zip

Change History (15)

#1 follow-up: @RDall
11 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

#2 @SergeyBiryukov
11 years ago

  • Milestone Awaiting Review deleted

#3 in reply to: ↑ 1 @whyameye
10 years 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 10 years ago by whyameye (previous) (diff)

#4 @obenland
10 years ago

  • Milestone set to Awaiting Review
  • Version set to 3.6

#5 follow-up: @obenland
10 years 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.

#6 in reply to: ↑ 5 @whyameye
10 years 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.

#7 @phpmypython
10 years 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

#8 @obenland
10 years ago

  • Keywords needs-testing added

#9 @DrewAPicture
10 years ago

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

#10 @lancewillett
9 years 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.

#11 @zrothauser
9 years ago

Tested and it's still working.

#12 @lancewillett
9 years ago

  • Keywords commit added; needs-testing removed

#13 @lancewillett
9 years 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.