Safe Areas not working after rotating phone using F7v4

Questions
1

My F7v4 app was properly handling the safe areas on iPhone using iOS SDK 12.4. I upgraded to iOS SDK 13.3 and the safe areas do not work after rotating the phone. They are working as long as the phone is not rotated.

Safe areas work properly after stating the app in portrait mode:

iPhone_11_Pro_Max_13_3_Portrait_Started
iPhone_11_Pro_Max_13_3_Portrait_Started1024×1934 269 KB

Safe areas are lost after rotating the phone:

iPhone_11_Pro_Max_13_3_Landscape_After_Rotating_From_Portrait_Started
iPhone_11_Pro_Max_13_3_Landscape_After_Rotating_From_Portrait_Started1952×964 206 KB

Safe areas work properly after starting the app in landscape mode:

iPhone_11_Pro_Max_13_3_Landscape_Started
iPhone_11_Pro_Max_13_3_Landscape_Started1948×948 192 KB

Safe areas are lost after rotating the phone:

iPhone_11_Pro_Max_13_3_Portrait_After_Rotating_From_Landscape_Started
iPhone_11_Pro_Max_13_3_Portrait_After_Rotating_From_Landscape_Started978×1922 247 KB

Any ideas? How does F7v4 handle the safe areas on rotation?

2

Did you create app with F7-CLI?
Do you have viewport-fit=cover in your meta tags in index.html?
WKWebView Cordova plugin installed?

3

The app was originally created with F7v3 and I did not use the CLI.

My meta tag is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">

I’m using the WkWebView.

4

You are use safe-areas framework7 class on view or custom style?

5

I only have one view:

<body>

  <!-- App root element -->
  <div id="app">

    <!-- Statusbar overlay element -->
    <div class="statusbar"></div>
  
    <!-- Left panel -->
    <div class="panel panel-left panel-cover">...</div>
  
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main safe-areas">

      <!-- Initial Page, "data-name" contains page name -->

    </div>
    
   </div>

</body>
6

Seems like there is an issue with some cordova or cordova plugin. Try to update cordova to latest version as well

7

I’m using Rhomobile. I think the issue is that it does not use a Launch Screen. It still uses the Launch Images.

Hopefully they will add Launch Screen support soon.