Community forum for knowledge and support

Updated 5 months ago

Banner 15 image formatting/sizing issue on Safari

At a glance

A community member reported an issue with image formatting and sizing for Banner 15 on Safari desktop. After sharing preview and published links, another community member acknowledged it as a known bug and suggested a potential fix related to overflow: clip and image ratio/fill settings.

The issue was demonstrated through a Loom video showing the difference between Safari and Chrome browsers. A possible solution was suggested using a traditional image implementation approach available in the Webflow Library under UI Elements > Images. The original poster indicated they would try this "old school" method and mentioned they also suspected it might be a ratio-related issue.

No definitive solution was confirmed as working, but troubleshooting options were provided through the Webflow Library resources.

Useful resources

Hi! The image formatting/sizing on desktop for Banner 15 on safari is off. Any ideas on how to fix? TY!

M
K
7 comments

Would you mind sending a read-only link?

dang, I've filed a bug for that one - thanks for raising! Were you able to get it to work okay in your project though or no?

I mean I can see its in your project but I can't tell if thats how you intended or not - this design is so cool and you are using a lot of off-grid stuff so yeah wasn't sure. It looks like the images at least look fine but I guess I am not looking at them in Safari so if you wanted to send along the publish URL if they are still broke in Safari, I can try to see what can be done about it.

if I had to guess, its likely something around the overflow: clip and//or ratio/fill of the image. You may have to do a more traditional implementation of images which would be to use some CSS trickery to get it to display old school.

We have this old school way in the Webflow Library > UI Elements > Images
https://www.relume.io/ui-elements?ui-elements-categories=images

hey matt thanks for taking a look! here's what i'm seeing in safari vs chrome: https://www.loom.com/share/194c9fd9c5f5416eb800c1390eae2139?sid=b522da7e-fecd-4802-8d03-7a7cc3939641 and here's the published link: https://btc-events-2.webflow.io/

thanks for the suggestion on the old school way i'll try that out. my initial hunch was the ratio as well but just didnt have time today to dig into it. i'll let you know what i end up doing or if i find a solution w/o the old school way!

Add a reply
Sign up and join the conversation on Slack