Space for statusbar in v5?

jacobg · February 11, 2020, 2:00pm

Yes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <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">
    <meta http-equiv="Content-Security-Policy" content="">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>My App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

And main.js has:

import Vue from 'vue'
import Framework7 from 'framework7/framework7.esm.bundle.js'
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
import App from './App'
Framework7.use(Framework7Vue)
new Vue({
  store,
  el: '#app',
  render: (h) => h(App)
})

And App.vue has in addition to the <template> and <script> above:

<style lang="scss">
@import "~framework7/css/framework7.bundle.min.css";
</style>

nolimits4web · February 11, 2020, 2:03pm

And of course you have WKWebView installed too?

jacobg · February 11, 2020, 2:09pm

No I’m using UIWebView (Cordova). Why, is there a bug with UIWebView? v4 was working fine.

nolimits4web · February 11, 2020, 2:10pm

UIWebView is deprecated a while ago and yes, it doesn’t support such safe areas

jacobg · February 11, 2020, 2:13pm

I was planning to update to WkWebView in a release later this year. Are you saying definitively that while v4 worked fine in UIWebView, that it won’t work in v5?

nolimits4web · February 11, 2020, 2:21pm

In v5 it won’t work, then you can add custom style hacks you mentioned above. But UIWebView is also deprecated officially by Apple and your app can be easily rejected from AppStore

jacobg · February 11, 2020, 3:07pm

Ok, so I switched to WkWebView, which was really easy. I thought it would be harder, because I heard about all sorts of cordova issues it had. But cordova-plugin-wkwebview-file-xhr seems to be smooth so far.

However, it does not resolve the status bar issue:

nolimits4web · February 11, 2020, 3:23pm

Try to create new clean app with CLI and compare. Also, any reason you test in old iOS 11 simulator?

jacobg · February 11, 2020, 4:22pm

Ah, you’re right. iOS 11 doesn’t display correctly. iOS 12 and 13 do display correctly. Is that a known issue? Is it resolvable?

You commented on v5 release announcement that iOS 11 is supported:

nolimits4web · February 11, 2020, 5:15pm

Check on real device

kerrydp · February 11, 2020, 9:26pm

An iPhone 6S should ideally be running iOS 13 in the best-case. I doubt you’d find very many 6S models running iOS11.

jacobg · February 11, 2020, 9:38pm

10% of my customers are running iOS 11.

kerrydp · February 11, 2020, 10:55pm

Did you add this CSS:

.device-cordova.device-ios {
  height: 100vh;
}

jacobg · February 11, 2020, 11:39pm

That does not affect the statusbar spacing on iOS 11.

kerrydp · February 11, 2020, 11:42pm

Have you set StatusBarOverlaysWebView in config.xml?

jacobg · February 11, 2020, 11:43pm

Yes. It works fine in iOS 12+.

jacobg · February 11, 2020, 11:45pm

I tested on an iOS 10 iPhone 5, and it has the same issue. I don’t have a physical iOS 11 device, but I imagine if the statusbar has the same issue both on physical iOS 10 and virtual iOS 11, then it would be the same on physical iOS 11.

jacobg · February 11, 2020, 11:48pm

Even the framework7 cli default app has this issue:

nolimits4web · February 12, 2020, 9:37am

Safe areas supported since iOS 11.1

jacobg · February 12, 2020, 10:47am

Ah ok, so I think you mean 11.2?

That’s when they changed from using css function constant() to env():

Are you using constant() as a css fallback in order to support iOS versions 11.0-11.1?