PNG images not displayed only on iPhone

Design help Layout & Design
1

Good evening, everyone.
I have a problem with some PNG images not displaying only on iPhone (both in portrait and landscape view) on any browser I use (I have tried Chrome, Safari and Firefox).

The problem was detected on iPhone X with iOS 17.5.1

I am attaching a screen from a simulator (Chrome extension) to show how they should display and then the screen from my smartphone which highlights the problem in question.

Thanks to anyone who can help me out with this problem

Best regards,
Franz

shapes smartphone - simulator
shapes smartphone - simulator1160×1462 91.7 KB

shapes (no) iphone.PNG
shapes (no) iphone.PNG828×1792 120 KB

Here is my site Read-Only: https://preview.webflow.com/preview/lamaiuscola?utm_medium=preview_link&utm_source=designer&utm_content=lamaiuscola&preview=1a0aa689cfb5c67f00719ddd3bc06b38&pageId=6682c6ce599071ca3753fdb2&locale=en&workflow=preview

2

Please share a public URL to the page you are having an issue with.

Define the device, browser, and OS version.

Note: You can debug an IOS Safari session by connecting your device locally to a Mac and Web Inspector

3

This is one of the pages where the problem appears (the others have the same formatting):

Device: iPhone X
Browser: Chrome, Safari, Firefox
iOS: 17.5.1

4

Same problem on:

Device: iPhone 13
Browser: Chrome, Safari, Firefox
iOS: 17.5.1

5

@franz there is no easy way to debug your issue without control over the project. I suggest you simply refactor on mobile. Place your images in a div for default devices, create another for mobile using one image, and hide the first on mobile, and the second to display. There is no point in 1.5mb of huge images for mobile anyway.

6

But they are simple images and do not weigh 1.5 mb at all

Why can I see that yellow oval on the homepage? And in the reference theme do the SVGs appear in the same position?

Homepage: la Maiuscola — Scuola Paritaria Parificata
Eurydice theme: Programs - Eurydice - Webflow HTML website template

Thank you for your helpfulness

7

My reference to sizes was incorrect, was debugging remotely on a real device.

Your animations/transitions might be an issue. You could debug that like I said. Would take a couple of minutes to workup and test.

8

Of course I will give it a try by putting the images in a div for different devices, but doesn’t such a solution for simple background images seem complicated enough?

9

I solved it by placing all the images within one block as on the homepage.
Thank you for support.