[wp-trac] [WordPress Trac] #47744: WordPress default galleries do not display properly on Safari 10.1 and possibly other older browsers

[WordPress Trac]

#47744: WordPress default galleries do not display properly on Safari 10.1 and
possibly other older browsers
----------------------------------+-----------------------------
 Reporter:  billybidley           |      Owner:  (none)
     Type:  defect (bug)          |     Status:  new
 Priority:  normal                |  Milestone:  Awaiting Review
Component:  Gallery               |    Version:  5.2.2
 Severity:  minor                 |   Keywords:
  Focuses:  ui, coding-standards  |
----------------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47744>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform