WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#47744 new defect (bug)

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

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

Description

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.

Attachments (3)

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

Download all attachments as: .zip

Change History (4)

#1 @billybidley
3 months ago

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.

Note: See TracTickets for help on using tickets.