Safari Image Rendering Issue - CMS Collection

Design help General
1

Hello,
I’m experiencing an image rendering problem with my Webflow site when viewed in Safari (version 16.6.1). The issue occurs specifically with images from my CMS collection on my clients desktop mac. I am using layout flex, not on the collection item but inside on the block link I added.

  • Images in the CMS collection grid are not displaying properly
  • Instead of the actual images, gray boxes are shown
  • The issue is consistent across multiple images in the grid
  • The problem only occurs in Safari 16.6.1; other browsers display the images correctly

-7922167741608053280

Any help would be appreciated

Thanks!

Here is my site Read-Only

2

This might be due to using the CMS to load a background image.
I recommend removing the background, and instead place an image into the link block. (set to 100% width & height with “cover” property) Bind the image to your cms. This is generally a better approach to the scenario of your layout.

3

Thanks Folio! I will give it try and let you know.

4

And in your layout, you’ll need to set the link block’s position = relative. Then set name_talent to position = absolute. This will allow the name to lay in front of the image.

absolute
absolute1600×881 59.5 KB

1 Like
6

Just talked with my client and it’s working perfectly. Thank again folio!

1 Like
7

Looks good. The flex property is keeping the name aligned to the right side so that should be fine.

How does it look in Safari 16.6.1 now?
I wasn’t able to replicate the original issue on my end. It looked correct to me before so interested to hear if this solved that issue.