iOS 11 beta 9 with ionic 1 white bar issue


#1

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


#2

This is also reported on cordova:

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


#4

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])


#5

@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.


#6

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.


#7

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

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.


#8

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:

  1. 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.

  2. WKWebview, there’s a small change we need to make to Ionics WKWebview Plugin, which we’re currently in the process of testing/adding.


#9

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


#10

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


#11

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


#12

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



#13

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.


#14

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!


#15

sent. will try to do a demo app. now


#16

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.


#17

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


#18

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:


iPhone X and Ionic?
#19

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 :wink:

Huzzah.


iPhone X and Ionic?
#20

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


#21

There you go, asking the hard questions :wink: 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’