Strange Status bar on iPhone pushes my prototype down when viewing my prototype after "Add to Home Screen"

Could you demo with the Figma app instead of using a Safari home page link?

Nope - I need to demo it on a real phone 😦

By Figma app, I meant the iOS app that you’d download from the App Store and run the prototype from there. Playing the prototype via the iOS app should knock out the status bar.

If using the iOS app is also not possible (e.g. you need to launch from a real home screen vs. a mocked up one) then unfortunately I am not aware of any easy workarounds. (There is a very hard workaround that involves you embedding the prototype in your own web site, and coding the page like a PWA to manage status bar visibility … but this is way more work vs. the Figma app.)

Unfortunately the Figma iOS app doesn’t work on my demo iPhone (says I have to update to the latest iOS version, which I’m very hesitant to do as it may render the phone unusable).

I’m going to get rid of the status bar in my design and see if that works.

I have the same issue/question. And yes, if you open the prototype in the official Figma mobile app, it behaves as expected (like, in a ‘native-app-way’). The problem is that I need to send the prototype to people that does not want to download a specific app nor create an account and then be added to my company’s Figma account (which they have to if they should be able to view the prototype inside the Figma app). It would definitely be so much easier to send the stakeholders a link, and then talk them through how to add the safari bookmark to their own phone’s Home Screen (without this pesky white bar that is pushing the content down on the screen).

Adding my own visualisation of the same problem the OP wrote.

Any updates on this? Same issue here.

Unfortunately, a website cannot hide the status bar by default afaik in iOS Safari.
Even when using the add to home screen feature it cannot be hidden, just the tool bar at the bottom disappears.

Maybe Figma could add the following meta tags to prototypes which could result in a hidden status bar when users still add the page to their home screen manually (I did not test this!):

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

Source:

Same issue, would be great to solve this problem