BG image not scaling in iOS, but they work on the local host

Thank you everyone! Help! I’ve been trying to figure this out for hours.

It works locally, but when I deploy through Netlify, the initial iPhone/iPad view crops the background image in a weird way. This is fixed on a reload.

This is only a problem for the “About-page” and nowhere else, despite similar css code being used for the “faq” and “roadmap” pages.

I’ve tried changing the background-size property, the asset optimization settings, reducing the size of the background image, and even changing up the properties I added margins to. None of this worked.

My Git Repository: https://github.com/filmsaremyalc/korus_eislyn/tree/main/buddies
My Netlify site name: Dream World Buddies - Created by Korus Studios

Please see attached a screenshot of the issue. Thank you!

Hey @filmsaremyalc

It is unfortunate the Safari doesn’t seem to support as many features/standards as other browsers. As I read in these forums recently Safari is the new Internet Explorer. Sad, but true.

There is some old threads around such as this one on Stack Overflow.

There is an article on CSS Tricks too

And check out Can I Use, which has a pretty comprehensive list of what browsers do and don’t support.

Thank you! This was super helpful.

1 Like