Images wrong on Safari only

A preview of my hackathon entry! Having some trouble with images from Xano in Safari on iOS and Mac. The problems are different in each:

Mac. All images load but they are supposed to be 1:1 ratio.

iOS. Some images do not load, but others with the same settings do load. Works correctly on Chrome.


Editor link: Editor - WeWeb

Thoughts?

2 Likes

Hi @foliodc :wave:

Were you able to fix this?

It works fine for me on:

  • Chrome on Mac
  • Safari on Mac
  • Safari on iPhone

All images are loaded and square

The issue went away on iOS but it is now back. Maybe it resolves over time after publish, or maybe it is a browser refreshing issue. Some forums online say that aspect ratio is not respected by Safari, is there an alternative?

Mac Safari 14.1.2 images are shown without 1:1 crop

iOS 16 Safari - Some images are not loaded. Loaded ok on a friend’s phone, may only break after republishing.

The problems are different on iOS 14. Images are shown without crop like safari. Also, Row and Column gaps do not work in this version, any fix or suggested alternative?

Was playing with Uploadcare to crop the images to a square before loading… and realized that feature is already built in to Xano, which fixed the issue!

For anyone interested, images hosted there can be resized and cropped to square on the fly by adding “?tpl=big:box” to the end of a URL. I created a few weweb variables for small, medium, large so it’s easier to add to an image URL. All settings can be found here:

Uploadcare does look super powerful though, may be worth integrating in the future.

1 Like

Although on iOS 14, the column and row gaps still don’t work. Would be nice to fix