Make WordPress Core

Opened 5 years ago

Last modified 5 years ago

#47744 new defect (bug)

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

Reported by: billybidley's profile billybidley Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 5.2.2
Component: Gallery Keywords:
Focuses: ui, coding-standards Cc:


The following thread details the problem:

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;
	} .blocks-gallery-image a, .blocks-gallery-image img, .blocks-gallery-item a, .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.

Attachments (3)

Safari_10.1_Without_Edits.jpg (307.9 KB) - added by billybidley 5 years ago.
Safari_10.1_With_Edits.jpg (287.4 KB) - added by billybidley 5 years ago.
Chrome_75_With_and_Without_Edits.jpg (160.6 KB) - added by billybidley 5 years ago.

Download all attachments as: .zip

Change History (4)

#1 @billybidley
5 years ago


.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.

Note: See TracTickets for help on using tickets.