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

Ask the community
1

I’m not sure if this is a bug, but here’s my experience:

  1. I have a mobile app prototype and the screen dimension in Figma is 457x812
  2. I need to include the status bar and notch as part of my prototype design
  3. I share a link to the prototype, that I open on my iPhone 8 (which has no notch)
  4. In order to get rid of the Safari browser’s UI, I use the “Add to Home Screen” function, which creates a web app icon on my iPhone.
  5. I tap on it, and the prototype loads

The problem is this: There is a thin white bar at the top, which pushes my prototype down 20 pixels. It’s all white except the battery indicator appears to be showing on the far right.

FigmaPrototypePushedDown
FigmaPrototypePushedDown457×813 26.8 KB

Obviously this is problematic because I cannot experience and demo the prototype on my iPhone properly, as the bottom navigation is cut off. I need a full screen prototype experience.

Anyone have any idea what I can do at this point?

1 Like
2

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

3

Nope - I need to demo it on a real phone :frowning:

4

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.)

5

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.

2 Likes
6

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).

7

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

prototype in safari
prototype in safari1329×1132 125 KB

8

Any updates on this? Same issue here.

9

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:

10

Same issue, would be great to solve this problem