WordPress default galleries do not display properly on Safari 10.1 and possibly other older browsers

[billybidley]

The following thread details the problem: ​https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent

Images are nested inside a flex container. The child elements have a height of 100% which does not work on these older browsers such as Safari 10.1. This is because the parent element does not have a set height. So the child element doesn't know what 100% height is. The correct way to do it is to remove the 100% height from everything and use flex throughout the elements.

.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
		flex-direction: row;
	}
.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
		height: auto;
		align-items: stretch;
	}
.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
		height: auto;
		display: flex;
	}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
		left: 0;
	}

The above CSS fixes the issue and should replace the current CSS.

[billybidley]

Adding

.wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure {
		width: 100%;
	}

Makes gallery images display to the proper width on Internet Explorer 11, however, does not make images stretch to their full height and crop. It shrinks the images. If anyone has a suggestion that would be great.