Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#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
Priority: normal Milestone: 4.7
Component: Bundled Theme Version: 4.7
Severity: normal Keywords: has-screenshots needs-patch
Cc: Focuses: ui

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 10 years 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 10 years 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 10 years ago.
38872.2.diff (389 bytes ) - added by derrickkoo 10 years ago.
gallery-3-columns-ie11.png (1.5 MB ) - added by derrickkoo 10 years ago.
3-column gallery post in IE11 with patch applied
gallery-1-column-ie11.png (1.0 MB ) - added by derrickkoo 10 years ago.
1-column gallery post in IE11 with patch applied
WP47b4-Gallery1-with-patch_ticket38872.jpg (95.4 KB ) - added by transl8or 10 years ago.
WP47b4-Gallery2-with-patch_ticket38872.jpg (95.1 KB ) - added by transl8or 10 years ago.

Change History (18)

@transl8or
10 years ago

View of a page with gallery in IE11

@transl8or
10 years 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
10 years 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.


10 years ago

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


10 years ago

#4 @helen
10 years ago

  • Keywords needs-patch added
  • Milestone Awaiting Review4.7

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

#5 @helen
10 years ago

  • Owner set to derrickkoo
  • Status newassigned

Assigning to @derrickkoo for investigation and hopefully a patch.

@derrickkoo
10 years ago

#6 @derrickkoo
10 years 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
10 years ago

#7 @derrickkoo
10 years 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 10 years ago by derrickkoo (previous) (diff)

@derrickkoo
10 years ago

3-column gallery post in IE11 with patch applied

@derrickkoo
10 years ago

1-column gallery post in IE11 with patch applied

#8 @transl8or
10 years ago

  • Resolutionworksforme
  • Status assignedclosed

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

#9 @transl8or
10 years ago

  • Resolution worksforme
  • Status closedreopened

#10 @helen
10 years ago

  • Resolutionfixed
  • Status reopenedclosed

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.