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.



Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: