iPhone X not styled correctly

I’m using the latest framework7 version 3.5.2 with Vue in a Cordova app.

I’ve set the html meta tag:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

When displaying a full size page, although the framework7-root has the proper safe-area-inset-top set for iPhone X, the page inside it does not. Rather, the page will overflow its parent root and take over the entire screen and notch. This issue occurs either with or without a navbar.

Here are some screenshots. Unfortunately, I had to mash them into one screenshot, because this forum won’t let new users upload more than 1 image.

First, here are 3 screenshots without a navbar, highlighting different elements. Perhaps if the page-content had a margin-top: env(safe-area-inset-top), then it might fix the issue.)

Next, here are 3 screenshots with navbar, which is completely obstructed. In the last screenshot, I manually added a margin-top to show the navbar properly.

Is this a bug, or is the developer expected to manually add these margins? The following docs seem to say that it should be automatic:

https://framework7.io/docs/iphone-x.html

Your app layout is wrong. Page can not be a Root’s children, it must be under View element:

#app
  .statusbar-overlay
  .view.ios-edges
    .page
      ...

Thanks @nolimits4web

My original App.vue looks like this:

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>
    <lock-screen v-if="locked" />
    <!-- initial page is specified in routes.js -->
    <f7-view main url="/" v-show="!locked" />
  </f7-app>
</template>

The LockScreen component has an <f7-page> as its root element.

It displays fine, but for iPhone X I had to add some extra styling, as I mentioned in my earlier post.

Based on your guidance, I tried changing it to:

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>
    <f7-view v-show="locked">
      <lock-screen />
    </f7-view>
    <!-- initial page is specified in routes.js -->
    <f7-view main url="/" v-show="!locked" />
  </f7-app>
</template>

But in this latter approach, the screen is blank when locked is true.

How should I design my app layout to support lock screen? I should not that originally I tried implementing it as a route, but it creates a bunch of problems, because it cuts a bunch of separations of concerns.

Thanks!

Ok, I got it working by passing :router="false" to the view containing the lock screen. Now I need to test the iPhone X styling.

Do you agree with this new layout? I had to use v-show for the views, because v-if breaks the routing.

So the iPhone X styling of the page looks good now that it’s in a view.

But there is another styling issue with a sheet I’m using. In the screenshot below, the bottom sheet contains a flexbox of rows. In the bottom row (containing backspace, 0, enter), I had to add a bottom padding. And then to make up for the loss of space, I had to make the sheet height greater, as follows:

.pinpad-sheet {
  min-height: 300px;

  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    min-height: calc(300px + var(--safe-area-inset-bottom));
  }

  border-top: 1px solid $key-border-color;
}''

/deep/ .keyboard {
  > :last-child {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

Is that expected, or is there a different way to handle sheets?

Looks good now, but instead of disabling router on view containing lock screen, i would just disable this View at all with :init="false" prop

1 Like