Need help from anyone with safari browser on their iphone would like to know if my site UI looks ok
website: https://nasa-image.onrender.com
issue:
a friend of mine (from japan) is getting stretched out images and UI is looking horrible in his phone Thing is he is the only one I knew who have an iPhone however he is not an web dev
I'm stuck and don't know how to solve this
Tried resolutions:
in the inspect mode in google chrome tried every iPhone models and tried every pixels but i'm not able to reproduce the issue he send me some pics
pics attached are stretched out one which is from iphone
and desired pics from my phone
9 Replies
Yes, images are getting stretched for me too. Also the images are very slow to load
😦 never knew safari browser will show different CSS, not sure how to solve this one though, thanks for looking into it
Research WebKit prefixed css. Some browsers need prefixed css for certain situations for it to work as intended
I'm not sure if you changed anything because I'm not seeing any issues on an iPhone, but I saw that you have
max-width: -webkit-fill-available; on your images. I'd suggest changing that to max-width: 100%.
-webkit- is a prefix, which means it's a non-standard property or value, and chances are it won't work in every browser. Like, that won't work in Firefox, and the images, currently, are overflowing if you use it.
CSS, in general, will be very similiar across all browsers, but as soon as you use prefixes that goes out the window.
We used to need them a lot, and there are a few non-standard things out there where we do need them, but they are very few and far between.
Actually, I found an image that was being stretched, and changing it to max-width: 100% fixes it.
I think this is because the fill-available is non-standard, so does some strange things... normally, images will keep their natural aspect ratio when you change the width. I think what was happening with -webkit-fill-available is it is keeping the normal height, but changing the width.@Kevin @iParaEimear Thank you very much for looking into the issue. 🙂
I've uploaded the changes in the site hopefully it will look good now
I’ve just had a look. The images are showing as intended now
Thank you 🙂
Even chrome on an iPhone is running Webkit engine which I see you’ve been told about. Also just so you know the dev tools only emulate the screen size of whatever device you’ve picked, it’s not able to emulate the engine like WebKit or Blink which I just reread and looks like you may already know since you mentioned resolution. So just wanted to mention it because many people think if they are using dev tools on a windows but have chosen an iPhone11, they should be seeing what an iPhone 11 would see .
Looks as though you have fixed it, images look good to me on this IPhone !
Thank you for verifying, guess we learn new thing everyday least we have to do is keep on trying new things