WordPress.org

Make WordPress Core

#38872 closed defect (bug) (fixed)

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

Reported by: transl8or Owned by: derrickkoo
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-screenshots needs-patch
Focuses: ui Cc:

Description

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.

Attachments (8)

WP47b4-IE11-gallery-page.jpg (99.7 KB) - added by transl8or 11 months ago.
View of a page with gallery in IE11
WP47b4-IE11-post-with-gallery_made-smaller-with-Strg-minus.jpg (122.1 KB) - added by transl8or 11 months ago.
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)
38872.diff (468 bytes) - added by derrickkoo 11 months ago.
38872.2.diff (389 bytes) - added by derrickkoo 11 months ago.
gallery-3-columns-ie11.png (1.5 MB) - added by derrickkoo 11 months ago.
3-column gallery post in IE11 with patch applied
gallery-1-column-ie11.png (1.0 MB) - added by derrickkoo 11 months ago.
1-column gallery post in IE11 with patch applied
WP47b4-Gallery1-with-patch_ticket38872.jpg (95.4 KB) - added by transl8or 11 months ago.
WP47b4-Gallery2-with-patch_ticket38872.jpg (95.1 KB) - added by transl8or 11 months ago.

Change History (18)

@transl8or
11 months ago

View of a page with gallery in IE11

@transl8or
11 months ago

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)

#1 @afercia
11 months ago

  • Keywords has-screenshots added

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

This ticket was mentioned in Slack in #core-themes by afercia. View the logs.


11 months ago

This ticket was mentioned in Slack in #core by helen. View the logs.


11 months ago

#4 @helen
11 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.7

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

#5 @helen
11 months ago

  • Owner set to derrickkoo
  • Status changed from new to assigned

Assigning to @derrickkoo for investigation and hopefully a patch.

@derrickkoo
11 months ago

#6 @derrickkoo
11 months ago

@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
11 months ago

#7 @derrickkoo
11 months ago

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.

Last edited 11 months ago by derrickkoo (previous) (diff)

@derrickkoo
11 months ago

3-column gallery post in IE11 with patch applied

@derrickkoo
11 months ago

1-column gallery post in IE11 with patch applied

#8 @transl8or
11 months ago

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

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

#9 @transl8or
11 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

#10 @helen
11 months ago

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

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.

Note: See TracTickets for help on using tickets.