Follow up for #1782090: Responsive images in IE8, height isn't adjusted

Problem/Motivation

The Zen 5.2 upgrade introduced a new width: auto; property for the img tag in the normalize.css file. It has been added to allow the responsive images to adjust their height in IE8 and it works. But it also introduces a side effect : all img tags using width and height to restrict their size just ignore it and are shown in full size.

This issue have been tested on Chrome, Firefox, IE 10 and all its compatibility modes (including IE8).

For example that is what I see in my admin_menu toolbar :
admin_menu_favicon_bug_width_auto.png.png
while the code says :
<img class="admin-menu-icon" src="//mydomain.com/profiles/myprofile/themes/custom/mytheme/favicon.ico" width="16" height="16" alt="Home">

I created a node including a big picture and its the same in the content.
When I disable the width: auto with the developper tools, the bug disappears.

Proposed resolution

I don't know...

Remaining tasks

Find a workaround.

CommentFileSizeAuthor
#4 _normalize.scss_.patch667 bytesAndreas Kohlbecker
admin_menu_favicon_bug_width_auto.png.png16.19 KBDuaelFr
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Garrett Albright’s picture

Garrett Albright CreditAttribution: Garrett Albright commented
Issue summary: View changes

Bump.

I'm noticing this happen on the front page of my site, which currently has an image with width and height attributes floating to the right of some text. The text jumps and re-wraps as the image loads. I absolutely hate this when I see it happen on other sites, so when I saw it happen on my own…

I tried setting width/height: inherit; on img, but that doesn't seem to work. All I can think of that would work is setting a style attribute whenever I use an image, but that would be pretty annoying…

My SSL cert doesn't support IE 8. I don't really mind if my CSS doesn't either. =/

IshaDakota’s picture

IshaDakota CreditAttribution: IshaDakota commented

This may be old news, but you can disable IE8 legacy support by setting:

$legacy-support-for-ie8: false;

in _init.scss.

This will remove this fix for IE8 and any others.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Version: 7.x-5.x-dev » 7.x-6.x-dev
Andreas Kohlbecker’s picture

Andreas Kohlbecker CreditAttribution: Andreas Kohlbecker commented
FileSize
_normalize.scss_.patch667 bytes

I am proposing the following fix for this problem.
By adding the class selector .lt-ie9 the legacy support is only applied to IE browsers < IE9, so other browsers a no longer affected:

  @if $legacy-support-for-ie8 {
    .lt-ie9  {
      /* Correct IE 8 not scaling image height when resized. */
      width: auto;
    }
  }

I attached a patch

maximpodorov’s picture

maximpodorov CreditAttribution: maximpodorov commented

The problem also exists when the image is placed in a table cell (when the cell width is not set explicitly).

kristiaanvandeneynde’s picture

kristiaanvandeneynde
Primary language Dutch
Location Antwerp, Belgium
CreditAttribution: kristiaanvandeneynde as a volunteer commented
Status: Active » Needs work

Patch won't work as it then tells IE to look for a class on child elements of an img element. Disabling IE8 support or moving the IE conditional outside of the img scope and then checking for .lt-ie9 will.

steinmb’s picture

steinmb CreditAttribution: steinmb as a volunteer commented
Parent issue: » #2448145: [meta] Release Zen 7.x-6.0
JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin at PreviousNext commented

> Patch won't work as it then tells IE to look for a class on child elements of an img element.

Oops! But that's easy to fix with &.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin at PreviousNext commented
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

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