iOS Webapp with expandable card covers the status bar

Using F7 v5.1.3 with Vue. A web app added to Homescreen on iOS (iPhone) with top notch has a problem where an expandable card covers the status bar. Kitchen Sink example app exhibits this behaviour - add it to the homescreen and you get this result:

Is there a way of preventing this behaviour automatically if we are on a device with notches in the portrait orientation on a fullscreen webapp? The documentation states that “In portrait orientation Framework7 will do required styles modifications automatically”.

Thanks for any help.

image

https://framework7.io/docs/cards.html#card-app-parameters

There is a hideStatusbarOnOpen parameter to control it

@nolimits4web Many thanks - I had assumed this was for use with the StatusBar component within Cordova apps, not fullscreen. For your info, the Vue version of the docs doesn’t list this as an option, just the hide-navbar-on-open and hide-toolbar-on-open.

Thanks for your swift reply.