hope that someone of you encountered a similar problem or can help me out here.
I built a site for a client and on Chrome and Windows/Android in general it works out perfectly.
However, according to my client (they sent me a screencast) some images don’t show in Safari on Desktop and Tablet (I work on Windows so it’s hard for me to also fix this as Safari is no longer supported on Windows).
On Safari mobile they show, however, I need to mention that I already had to work out a fix for this, because in the beginning they weren’t showing either. I could fix the issue on mobile which had something to do with negative values for positioning (e.g. after removing “bottom: -5 rem” in the positioning tab, pictures where showing again on mobile) which apparently is not supported in Safari.
However, on Desktop and tablet some images still don’t show. I removed all negative positioning values and still some of the images won’t show. What’s even weirder is that images that show share the same classes and style with the ones that won’t show, which makes it really hard to understand for me…
If anyone has any idea, I’m really grateful for any tips, what might cause this!
After some troubleshooting I found the cause for the issue to occur:
apparently safari has problems with div/images having their height set to :auto (some images with height:auto; still where displayed, so, kind of weird). Anyways, fixed the issue by adding a minimal height of 2 REM to all images, now they show as expected.
I encountered issue with images on Safari as well. My suspicion was, that the issue might be avif and the fact, client has older version of the mac os and safari (older macbook air). I tested it on other 15 macs (family and friends) and no one had the issue.
Before changing all of the images and compressing them to webp instead, trying to figure out, if it’s not something small/stupid, that could fix that.
I think it’s a more of an edge case, but since it is happening on clients computer, it’s super annoying.
Hey Thanks for the reply. So yup, it was issue with compability of older Safari and avif format. Did all of the tricks that came to my mind to fix it, but I ended up changing it all to webp.
