Responsive images in IE8 adjust there width correctly but their height just gets stretched rather than scaling down with the width.

To fix this the CSS making the images responsive in normalize.css needs to have the following declaration added:

width: auto;

normalize.css

img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */

  /* vertical-align: bottom; */ /* Suppress the space beneath the baseline */

  /* Responsive images */
  /* @todo Add responsive embedded video. */
  max-width: 100%;
  height: auto;
  width: auto;
}
CommentFileSizeAuthor
#3 ie8-image-scaling-1782090-3.patch832 bytesechoz
#1 ie8-image-scaling-1782090-1.patch1.23 KBechoz
responsive-images-ie8-comparison.JPG23.85 KBjamiemagique

Comments

echoz’s picture

echoz commented
Version: 7.x-5.1 » 7.x-5.x-dev
Status: Active » Needs review
StatusFileSize
new ie8-image-scaling-1782090-1.patch1.23 KB

Yep, this is an ie8 only bug (not in 7) when the img element has a max-width set, the height doesn’t scale down when resized. Setting width: auto; does fix it (and apparently so does removing img height + width attributes via js, which is contrary to a D7.9 update that "restored height/width attributes on images").

I didn't find this fix in many of the common responsive frameworks I assume, because IE 8 is not made responsive, however, it does fix another bug with almost identical conditions - Using max-width on images can make them disappear in IE8.

I would rather feed IE8 a desktop layout #1539682: Turn off Respond.js by default, use .lt-ie9 rules for IE8 layouts, where it wouldn't be responsive, but this would support that choice, or flexible columns within a desktop layout.

At any rate, I'm open to a "won't fix", and Jamie, certainly this is your custom fix.

nodecode’s picture

nodecode commented

I can confirm that this patch fixes the issue for me in ie8. Thanks a lot!

-EDIT-
However, I agree that there appear to be more serious issues with zen 7.x-5.x responsive layouts and ie8 that go well beyond this bug.

echoz’s picture

echoz commented
StatusFileSize
new ie8-image-scaling-1782090-3.patch832 bytes

Re-rolled against current dev.

echoz’s picture

echoz commented
Status: Needs review » Fixed

Committed in http://drupalcode.org/project/zen.git/commit/53008ce, thanks Jamie!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.