IE11: gallery images stretched vertically

[afercia]

This is how the gallery images appear on Internet Explorer 11 and Gutenberg current master:

[khleomix]

@afercia I can duplicate this issue and would love to work on this.

[jeffpaul]

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

[jorgefilipecosta]

It seems beside flex problems IE11 also does not support object-fit CSS property used in the gallery. There are some polyfills available but I'm not certain if adding a polyfill in the front end is something we should do.

[opicron]

I had the same issue, an temporary fix is rather simple:

.blocks-gallery-item figure {
  flex-shrink: 0;
}

.wp-block-gallery .blocks-gallery-item {
  flex-grow: 0 !important;
}

Source:
https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx
https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx

Stackoverflow (accepted answer):
https://stackoverflow.com/questions/36822370/flexbox-on-ie11-image-stretched-for-no-reason

PS:

I had to adjust the calculation of rows by 1 (17 instead of 16) pixel for IE11 in my setup. Else the rows would collapse on before the third image.

@media (min-width:600px){
  .wp-block-gallery.columns-3 .blocks-gallery-image,.wp-block-gallery.columns-3 .blocks-gallery-item{
    width:calc(100% / 3 - 17px)
  }
}

[mtias]

This should be addressed with #7465