Given these sample settings in Oxygen‘s Gallery component,
the gallery looks fine in non-Webkit browsers like Chrome and Firefox:
but not in Safari:
The images appear much shorter in height than they should be in Safari. Apparently, Safari is actually rendering Oxygen’s gallery component’s HTML output correctly per W3C spec while the other browsers are being lenient.
The fix for ensuring that images look the same/correct in all browsers is to declare each gallery item’s (.oxy-gallery-item) display as flex and let the direct child element, oxy-gallery-item-contents automatically stretch by changing its height from 100% to auto.
i.e, add this CSS at Manage > Stylesheets:
body #_gallery-3-66 .oxy-gallery-item .oxy-gallery-item-contents {
height: auto;
}
#_gallery-3-66.oxy-gallery .oxy-gallery-item {
display: flex;
}where _gallery-3-66 is the ID of the gallery component.
After:
