Twenty Seventeen: Images in a Gallery within a post or page show different sizes in IE11

[transl8or]

I created a post and page with some images inserted as a gallery. It looks all fine in Firefox 49 and higher.

But this is how the page and post with the gallery does look in IE11. (See Screenshots attached.)

The wrong, different sizing of the images in IE11 does not happen, when the images are linked to None. It only happens when the images are linked to Attachment Page and Media File.

[transl8or]

View of a page with gallery in IE11

[transl8or]

View of post with gallery in IE11, with a sidebar (made browser content smaller with Strg + -, to show more of the whole conent in relation to gallery bug)

[afercia]

Additional step to reproduce for me: set the gallery images size to a value other than "thumbnail".

Seems IE 11 can't calculate max-width when the element's parent is set to display: inline-block without an explicit size, which makes sense since when an inline-block element width is not set, it depends on the children. See ​https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width

I guess other browsers check the grand parents size too. /cc @davidakennedy

[helen]

Seems like we should take a look at this since it's IE11; asking around for some help.

[helen]

Assigning to @derrickkoo for investigation and hopefully a patch.

[derrickkoo]

@afercia is right about the cause of this problem. Giving the .gallery-item a img items an explicit width of 100%; fixes it for me in IE11 and does not have any negative effects in Chrome, Firefox, Safari, or Opera.

[derrickkoo]

Please use 38872.2.diff instead. This patch fixes the problem by applying the explicit width to the img's parent instead of the img itself, which allows for images to display at their natural width if they're smaller than 100%.

You can test this by setting the gallery to a single column with size set to "Medium." The images should display at their natural size, narrower than the single column.

[derrickkoo]

3-column gallery post in IE11 with patch applied

[derrickkoo]

1-column gallery post in IE11 with patch applied

[transl8or]

Applied the patch here and looks good now in IE11. (Also in FF, Opera, Icon.) +1

[helen]

In 39339:

Twenty Seventeen: Ensure galleries display correctly in IE11.

It appears IE11 needs an explicit width for an inline-block parent element.

props derrickkoo, afercia.
fixes #38872.