Safe Areas not working after rotating phone using F7v4

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:

Safe areas are lost after rotating the phone:

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

Safe areas are lost after rotating the phone:

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

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

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.

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

I only have one view:


  <!-- 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 -->



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

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.