-1

Have an iPad Web Application1 which will be saved to the user's home screen and function as an app.

We're using the below meta tags so it functions with as minimal UI as possible on iPad.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Initial load of the application is good with an expected small UI:

Minimal chrome Picture of minimal status

The issue comes when the user navigates to a new page. The Safari forward/back buttons appear, even if there is no history.

Expanded chrome Screenshot from iPad with a gray box covering the top of the screen, forward and back buttons are present on the left

Question: is there any way to stop Safari from adding an expanded status bar?

This is a NextJS app if it helps, using the built in router.

1 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

joeyfb
  • 3,044
  • 3
  • 19
  • 25

1 Answers1

0

The manifest.json was not loaded for the application. This made pages after the first load add the extra chrome. Incorporating missing manifest.json fixed the problem.

Same as this question:

In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?

joeyfb
  • 3,044
  • 3
  • 19
  • 25