iOS full screen status bar

I am working to style a multiple pages App status bar. In most pages, which with a nav bar, it work well. Because the status bar background is just same as the nav bar background.

In a few pages I need to hidden the status bar, and show an image through the status bar area. Preview on below Photoshop draw image:

In fact, because this page have a colored status bar, so it look like this:

Thanks very much.

1 Like

There is a tricky css way to do this.

In fact, since we have set viewport-fit=cover, so the body content has cover the all browser content. The status-bar display as a white bar is because of Framework7 set a padding-top: var(--f7-appbar-app-offset), so the white color is came form the Page

And there are two method provider of router: beforeEnter and beforeLeave.

So, we can change the status-bar background css value to the background-image we wanted to show, and clear it before leave.

I found some guys said splashscreen plugin to do this. I haven’t try.

1 Like

Thanks for the trick! :blush: