Fabric Theme: product editorial section doesn't work on safari

[hausofmossandmoon]

Fabric Theme: the editorial product section isn’t working on safari. the product images are not showing up. thanks

[tim_tairli]

Ignore the AI-generated message above – none of the points are applicable.

Was it working fine before theme update or any of the previous versions?
What’s the ios/macos version of your device?
Have you tried a newer device?

Briefly:

Shopify supports the latest two versions of all major browsers

as per https://help.shopify.com/en/manual/shopify-admin/supported-browsers

I’ve tried on my latest ios iPhone and the site works well.
However, the older version ios emulator show very similar to your picture:

I must say that theme demo store fails too in this older version of the IOS.

This is Javascript incompatibility and I guess there is no easy fix for this.

You may be able to contact Shopify support and complain but I would not expect any immediate reaction.

[alejvpro]

I had this same issue in the Savor theme on the “Featured collection: Editorial” section.

Inspired by this post: Custom codes not showing on Safari. Dawn 15.4

I was able to fix this by adding the following CSS to my “Featured collection: Editorial” section’s Custom CSS:

.product-media__image {
  height: 100%;
}

[hausofmossandmoon]

thank you, i did this but to no avail. not sure whats conflicting it!

[tim_tairli]

It’s just theme uses Javscript code which is not compatible with your version of the browser.
It is compatible with the newer version of the same browser.

[hausofmossandmoon]

okay thank you! it seems to not be working on chrome now too though, the image section is reduced in size, its somehow being cut off like theres a bit of interfering code… this image should be larger and not cut off..

[tim_tairli]

No, this happens because wishlist app adds its button in a wrong place.
If I hide it in my browser, then it looks better:
With button “visible”

With button hidden:

So you can add the same CSS code I’ve used in “Custom CSS” of this section:

xb-wishlist-button-collection {
  display: none;
}

[hausofmossandmoon]

@tim_tairli

xb-wishlist-button-collection {
  display: none;
}

you legend, thank you so so so much!!! i didn’t have a clue it was the wishlist.