Framework7: Status bar overlay broke in iOS 11

[ytbryan]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Framework7 Version: 1.6.5
• Platform and Target: iOS 11

Just wish to report that it is broken in iOS11. Previously, it was working on iOS 10 with the same code base. Will be helpful if someone can confirm this too. Will dig in to figure out why when I have the time.

[applecat]

I have this issue in iOS 11 too. After recompile and run two Framework7 based projects on iOS 11 devices I have this grey statusbar instead of color set for .statusbar-overlay in CSS.

I try reinstall cordova-plugin-statusbar from repo:
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
but this doesn't help — statusbar stays grey.

It's interesting that in my two apps statusbar now have two different colors: light grey in first app and dark grey in second.

[applecat]

I find solution, it's quite simple. You just need add viewport-fit=cover into viewport meta tag and everything will be ok. My viewport tag looks like this now:

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

Solution find here: https://github.com/jcesarmobile/cordova-plugin-disable-ios11-statusbar

[rvanzon]

@applecat it works, but I only have problem: https://framework7.io/docs/status-bar.html
even when using <div class="statusbar-overlay"></div>

[rvanzon]

ok, I fixed it differently in Swift. Add this to your viewDidLoad()

if #available(iOS 11.0, *) {
    self.webView.scrollView.contentInsetAdjustmentBehavior = .never
}

[ghost]

@rvanzon,

Thanks man. works like a charm.

[ytbryan]

closing this as the solution works 👍🏼 Thanks for helping @applecat @rvanzon

[sibijohn72]

@rvanzon hi, can you elaborate on your fix. which file should i add this function to? from a little research i found out that it's a function from the UIWebController class but did not find any pointers on how to apply this fix...

[rvanzon]

@sibijohn72 You should put this in the viewDidLoad of your UIViewController. The one that controls your webview.
https://developer.apple.com/documentation/uikit/uiviewcontroller/1621495-viewdidload

[pontigol]

Pardon me for revisiting this issue but I am also interested in solving the https://framework7.io/docs/status-bar.html problem that reappeared in iOS 11. It seems to me that the suggested solution is dependent on swift and not a pure css / js / framework7 oriented solution, am I right? Does anyone have a solution for this without using swift? Thanks in advance!

[rvanzon]

@pontigol I am not sure if that's possible. Maybe try something with an iframe or something or try hacking it with CSS. Kinda ugly though...

[ytbryan]

@pontigol have you tried the solution that applecat posted?

Solution find here: https://github.com/jcesarmobile/cordova-plugin-disable-ios11-statusbar

anyway this is not a framework7 issue. It's a iOS issue.

therefore, the solution must be either swift/objective-c or some form of plugins that changes that property. Personally, i find it a hassle to interact with plugins like cordova.

[pontigol]

@rvanzon Yeah, maybe I should try hacking it with css, but it doesn't feel very good.

@ytbryan I tried viewport-fit=cover which solves the color issue but still leaves me with an overlap and a spacing at the bottom. I am currently doing a cross-plattform "save to home screen"-app using Framework7 which was nice because it was both cross-platform and uses html and js, both of which I am familiar with. If I have to blend in swift I feel that the whole purpose of an html framework for mobile apps would at some point be lost.

[pontigol]

For those interested: viewport-fit-cover in the viewport meta tag + applying height: calc(100% + 20px); to the body element solves it without to much hacking. I also had to do some height and margin adjustments to my navbar and navbar-inner divs but that might depend on my app.

[miscampbell]

For me when adding viewport-fit=cover this did not work on its own. It only worked for me when I had both:
minimal-ui, viewport-fit=cover

[nigelbpeck]

viewport-fit=cover worked for me and fixed the issue with the background colour (not using Swift here). Probably minimal-ui was also needed but I already had that from the standard setup, which I guess is the same for most folks.