Custom codes not showing on Safari. Dawn 15.4

Technical Q&A
,

Topic summary

A custom product variant section (featured-variants.liquid) stopped displaying images on Safari after upgrading from Dawn 15.3 to 15.4, though it continued working on Chrome.

Root cause: Safari CSS compatibility issue where image containers collapsed to zero height.

Solution that worked:

.card .media {
    height: 100%;
}

Adding this CSS rule to the section’s custom styles resolved the visibility issue.

Alternative suggestions included:

  • Adding a more specific CSS rule targeting the section ID in base.css
  • Checking for Safari-specific handling of aspect-ratio, object-fit, or lazy loading
  • Rebuilding the custom section based on Dawn 15.4’s updated featured-product.liquid

Status: Resolved. The issue was fixed by applying the height fix to .card .media elements.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I created this section featured-variants.liquid custom code for my Dawn 15.3 theme. It allows me to display one product as multiple different products (with different color variants). However, as I upgraded to Dawn 15.4, the codes still complied but visuals are missing on Safari.

Attached image is of the said section (on homepage). Working fine on Chrome.

Screenshot 2025-08-28 at 9.51.47 am
Screenshot 2025-08-28 at 9.51.47 am1920Ă—564 57.5 KB

Much appreciate any help!!

Site: https://truebond.us/

Product images not showing up
Fabric Theme: product editorial section doesn't work on safari
2

Hi @sunday_april

This is a common Safari CSS issue where your custom section’s image containers are collapsing to zero height. You can try the following

First, duplicate your theme for safety and make the following edit on the new copy.

  1. In your theme’s code editor, go to the file: assets/base.css.
  2. Scroll to the very bottom of the file and paste this exact code:
/* Fix: Featured Variants image visibility on Safari */
#shopify-section-template--22384260219196__featured-variants .card--media {
  height: 100%;
}

Click Save.

Now, preview your homepage on a Safari browser or an iPhone. The images in that section should be visible. If it looks correct, publish the theme.

Hope this helps!

3

Hi,

This is likely a compatibility issue after the Dawn 15.4 update. Since it works in Chrome but not Safari, check your custom section for CSS like aspect-ratio, object-fit, or lazy loading, as Safari handles these differently. Also compare your code with the updated featured-product.liquid in Dawn 15.4 — rebuilding your section on top of the new code usually fixes the issue.

4

This can go into your custom styles or “Custom CSS” of the section…

.card .media {
    height: 100%;
}
1 Like
5

Hi, thanks for your help. Unfortunately it did not work

6

Amazing it works!!! I’ve spent days on this issue. Thank you so much!!

1 Like