iOS 11 beta 9 with ionic 1 white bar issue

shashwattripath · September 4, 2017, 8:57am

Getting white bar at the bottom when using IOS-11beta9. I am not sure if it is cordova issue or ionic issue.

Previously issue was the white background at statusbar so at below cordova issue it’s told that use viewport-fit=cover should fix it. But on adding viewport-fit=cover does fix provider bar issue but now there is a white bar at the bottom

Ref: https://issues.apache.org/jira/browse/CB-12886

shashwattripath · September 10, 2017, 4:01pm

This is also reported on cordova:

https://issues.apache.org/jira/browse/CB-12886

Sujan12 · September 10, 2017, 4:37pm

There seems to a reproduction with a plain Cordova project (from Darryl), so this is not really an Ionic issue. Nothing Ionic can do to fix it.

You could help progress the Cordova issue by building a plain Cordova reproduction and put it on Github so all people talking there can actually see the code that is causing the issue.

(And best keep Ionic out of it for now, some people on the Cordova side seem to be a bit allergic to everything that concerns Ionic [which is fine in this case as Ionic is not directly relevant])

EddyVerbruggen · September 10, 2017, 4:48pm

@Sujan12 I don’t think it’s an allergy but rather the perception that “if it’s a Cordova problem then it’s not our problem”.

Of course it’s Ionic’s problem as well as it uses Cordova. So we should all try to help fix it instead of letting the Cordova maintainers figure it out on their own.

Sujan12 · September 10, 2017, 5:02pm

Hi @EddyVerbruggen

“It’s not an Ionic issue” and “It’s not an Ionic problem” are two very different things. I chose “issue” deliberately to mean that there is no problem or bug in the Ionic codebase that could fix this.

Which also means that starting to investigate and discuss the problem here as well would be a mistake as it would distract from the efforts done in the Cordova JIRA. It’s a Cordova issue (that of course also affects all Ionic users and projects) that should be handled over there.

Additionally I gave @shashwattripath advice on how to progress the issue over there. If I had a device to reproduce and machine to build for the environment I would jump in myself - but I don’t.

max · September 20, 2017, 2:09am

@EddyVerbruggen @Sujan12 we’re taking a look right now, we missed this post

And yes, we absolutely need to pitch in and try to fix this and figure out what’s going on. Also we totally get that Cordova repro cases should just be plain Cordova to reduce moving parts, no hard feelings there.

mhartington · September 20, 2017, 2:33am

Hey there! So I currently have a PR on the statusbar plugin to address things for ios11

This should make sure that things are correctly sized, and positioned, especially for iPhoneX.

Additionally, on Ionic’s side of things, we’ll need to start generating Storyboard images (2732x2732 images) and referencing them in the config.xml as

        <splash src="resources/ios/splash/Default@2x~universal~anyany.png" />

As for iPhone8/iOS 11, there seems to be 2 paths here:

UIWebview, for now, we’ll need to add viewport-fit=cover to the viewport meta tag in the index.html. This will make sure the index fills the entire viewport.
WKWebview, there’s a small change we need to make to Ionics WKWebview Plugin, which we’re currently in the process of testing/adding.

max · September 20, 2017, 4:18am

Okay WKWebView Plugin has been updated, please try it: https://github.com/ionic-team/cordova-plugin-wkwebview-engine

abdohossam5 · September 20, 2017, 3:40pm

doesn’t fix it for UIWebview. content still being pushed by around 20 px below the ion-header above the ion-content.
ionic v-1

abdohossam5 · September 20, 2017, 3:52pm

also when open the camera from the app and return back to the app the status bar becomes blank again.

max · September 20, 2017, 3:53pm

You need to add viewport-fit=cover to your meta tags, did you do that? See the app bases for example:

github.com

ionic-team/ionic2-app-base/blob/master/src/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

This file has been truncated. show original

github.com

ionic-team/ionic-app-base/blob/master/www/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then remove the CSS include above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

This file has been truncated. show original

abdohossam5 · September 20, 2017, 4:00pm

Thanks for your prompt reply. I did add viewport-fit=cover and I even tried using the status-bar- plugin with the changes from the pull request. I am using cordova-ios 4.4.0 in case this makes any difference.

max · September 20, 2017, 4:15pm

Any chance you can send me a screenshot? max@ionic.io (or just post it here if you’re comfortable).

Also a demo app zipped up would be hugely helpful as well!

abdohossam5 · September 20, 2017, 4:22pm

sent. will try to do a demo app. now

abdohossam5 · September 20, 2017, 6:08pm

seems like when i remove -webkit-overflow-scrolling: touch; from overflow-scroll class the content is not pushed anymore but this can’t be the solution.

max · September 21, 2017, 4:40pm

We fixed the content scroll issue, can you try the latest WK plugin

pliablepixels · September 21, 2017, 5:02pm

Just noticed this thread. I posted this in another IphoneX thread, but moved it here, as this is a v1 thread. I am patching up a v1 app to work properly on X and ensure its not broken on legacy platforms. I’m almost there but not quite. My problem is not with IOS11, but with iPhone X. So I supposed my issue maps to both the iPhone X and this v1 thread in parts…

What I’ve done so far:

Created a single large image (2732x2732) and replaced my legacy splash images with a single one (see here)
Modified index.html to have the correct viewport-fit=cover directive (see here)
I added padding-top: constant(safe-area-inset-top); to my body CSS. (see here) - not sure if this really made a difference, though
patched cordova-plugin-statusbar with @mhartington’s open PR
I am using UI-Webview, not WK
My app.js initializes the status bar with

StatusBar.styleDefault();
StatusBar.backgroundColorByHexString("#2980b9"); // the blue color

This is what I see:

pliablepixels · September 21, 2017, 9:03pm

I can confirm that this alternate status bar PR fixes the issue completely for me. Now I need to see what it takes to add back and empty row or so to make sure the icon doesn’t touch the time

Huzzah.

EvanW · September 21, 2017, 9:59pm

What happens when you rotate into landscape mode? Does it still fill the notch correctly?

pliablepixels · September 21, 2017, 10:00pm

There you go, asking the hard questions let me try. will update this post

Updated, it fills the notch, but it covers the text. What the heck are we supposed to do to work around that? I suppose I’ll tell my users 'hold it differently’