iPhone web-app dashboard not anchored at top of screen

Vendors FlowFuse
1

Hi,

I have created a dashboard that functions properly and is responsive on both PCs and iPhones. However, I have one problem with the iPhone. Here, it is shown using the ui_template node with its default example code (added a frame).

I open the dashboard in Safari and place it on the home screen as a web app, then:

  1. When holding the phone in landscape orientation and opening the dashboard from the home screen, I get some white space above the dashboard like this:

IMG_0001
IMG_00011920Ă—945 53.8 KB

(The bottom of my real dashboard actually drops down below the bottom of the screen)

  1. I then change the orientation of the phone to portrait, and the page responds correctly with the dashboard at the very top of the screen:

IMG_0002
IMG_00021920Ă—3664 242 KB

  1. When I again change the orientation to landscape, the dashboard remains at the top, in the way I expected already when opening it in landscape orientation.

IMG_0004
IMG_00041920Ă—980 61.8 KB

This is on an iPhone 16 Pro Max with the latest iOS 18. A dashboard based on the original NodeRed dashboard does not behave like this.

Is there anything I can do about this?

2

Test other browsers to verify if it is a safari related issue.

Test with other aspect ratio to verify if this happens on a specific media breakpoint.

Test with a different dashboard version to verify if it is an issue introduced on a recent release.

3

Seems to be a Safari thing. Same behaviour if I put an arbitrary web page link on the iPhone home screen from Safari (the only way, as far as I understand). It is as if when opening the web-app/page in landscape orientation from the home screen, it acts as if there were the address field on top. (Doing the same thing on an older iOS (Ver 15) opens the page in portrait even if the phone is in landscape.

1 Like
4

Have you tried debugging a page opened in Safari via on macos? Something like Chrome DevTools.

5

If you connect your iphone to a mac, you can open dev tools in safari on the mac for the iphone as well.

image
image1024Ă—520 62 KB

image
image1104Ă—394 75.3 KB

2 Likes
6

iOS update solved the problem - not an issue anymore :slight_smile:
Thanks for the input.