iPhone X support

[vespino]

On iPhone X and higher the inappbrowser looks like this (I'm referring to the status bar):

I have added the new splashscreen image and the app itself looks great. Is there a way to fix this?

Is there also a way to keep the content of the inappbrowser from going under the "homebar"?

Phonegap uses "constant(safe-area-inset-bottom)" and "env(safe-area-inset-bottom)" for this.

[cvanem]

I am also having this issue on an iPhone XS. The status bar looks fine in the Cordova webview (using cordova- plugin-statusbar). After the inappbrowser is opened the status bar appears incorrect. I would also expect the status bar area to be hidden when the phone is in landscape mode.

Here is how it looks in portrait mode:

This is landscape. The status bar text is gone, but the area is still offset. This area should not be displayed when in landscape mode.

This is how I would expect it to look and how it looks in the Cordova webview:

I have had some success by manually setting the STATUSBAR_HEIGHT to 0 in the CDVInAppBrowser.m file, but this then requires the padding to be implemented in user space and does not allow altercations to the text color.

It would be nice if the inappbrowser inherited the settings from the Cordova WebView using cordova-plugin-statusbar.

Has anyone found a solution other than modifying the source code?

[vespino]

@cvanem I'm using this fork of themeable browser now: https://github.com/toontoet/cordova-plugin-themeablebrowser.git

[mosabab]

Hello,

Before i post about like this issue, i read your issue and i face the same thing.

I face the same problem when testing on iphone x, with latest ios 12

Testing on iphone 7 plus with latest ios without any issues, just i face this issue on iphone x.
Using Cordova plugin inappbrowser master version. 3.1-dev

@dpa99c can you please test on iphone x to see this issue ?
Please try to open any website using inappbrowser master version, and look a the top and you will see what i mean.

Regards

[dpa99c]

I have patched a fix which resolves this issue for iPhone X family devices into a fork of this plugin (cordova-plugin-inappbrowser-popup-bridge).

When I have time, I will back patch it to this plugin (or someone else can do it before me).

[mosabab]

Hello @dpa99c ,
Thanks for reply,

We wait your fix.

thanks

Regards.

[mosabab]

Hello @dpa99c

I try to use (cordova-plugin-inappbrowser-popup-bridge). but this plugin have an 2 issues:
1- The prvious issue (#424) in master version that you solved still appear in this popup-bridge plugin.
2- if you try to open inappbrowser and you are using the option hidden=yes, and your background is dark and using preference name="StatusBarStyle" value="blacktranslucent" , then: the status bar become in light color before the window appear (before inappbrowser.show) take action.
(in master version the status bar work correctly, but it conflict with upper side in inappbrowser).
So, I think the master version is better than this, but the layout conflict with status bar in upper side of inappbrowser.
Please note that: master version work correctly without any issues in older iphones (8,7,6..) but this happen only in iphone x family.

I hope these information will help to solve this issue.

Thanks again for solving old issues, and we hope from you to solve this issue as soon as possible.

Regards

[dpa99c]

@mosababubakr

1- The prvious issue (#424) in master version that you solved still appear in this popup-bridge plugin.

The fix which I committed to cordova-plugin-inappbrowser for #424 has not been merged into cordova-plugin-inappbrowser-popupbridge.

Note that cordova-plugin-inappbrowser-popupbridge is a fork which I created for my own specific needs, so is not a fully maintained fork of this plugin.

2- if you try to open inappbrowser and you are using the option hidden=yes, and your background is dark and using preference name="StatusBarStyle" value="blacktranslucent" , then: the status bar become in light color before the window appear (before inappbrowser.show) take action.

Status bar color is not an issue for me because in the app in which I use cordova-plugin-inappbrowser-popupbridge in production, the main app status bar colour is also light so matches the inappbrowser.

(in master version the status bar work correctly, but it conflict with upper side in inappbrowser).

cordova-plugin-inappbrowser-popupbridge has been fixed so that the statusbar height is set to the default and only works if cordova-plugin-statusbar is also present (which it is in my app). It has the effect of making the statusbar height 40px on iPhone X family devices and 20px non-iPhone X family, which resolves the issue in my app:

However, this statusbar is also applied in landscape orientation, which is fine for non-iPhone X family, but means on iPhone X family the status is displayed when it should be hidden (as it is in the main app Webview by cordova-plugin-statusbar):

This is not a problem for me as my app is fixed in portrait, however it could do with fixing for generic use.

The above screenshots have been created using the iphonex branch of my cordova-plugin-inappbrowser-popup-bridge-test test app .

[mosabab]

@dpa99c

Thanks for explain.

Anyway,
I think your fix for cordova-plugin-inappbrowser-popup-bridge can be applied to the cordova-plugin-inappbrowser master version will make a good sense.

Thanks

Regards

[dpa99c]

@mosababubakr I will first try to fix cordova-plugin-inappbrowser-popup-bridge so that the statusbar is hidden in landscape. Then I'll port those changes back to this plugin via a PR. Hopefully I can get this done in the next week or so.

[mosabab]

@dpa99c

If you can also fix the margins in landscape, please refer to the following picture to see the issue.

You can make safe margins in landscape mode as safari do, please open Safari in iphone x in landscape mode and try to open any website, you will see that the margin is safe and the camera not conflict with the inappbrowser contents. ( in the left side).

Regards

[dpa99c]

This needs to be addressed using the safe-area-inset constants within your CSS: if I were to modify the plugin to add that padding natively, then you would have a big grey bar on the left instead of your blue background color from your CSS.

The iphonex branch of my cordova-plugin-inappbrowser-popup-bridge-test test app illustrates how this can be done:

See Designing Websites for iPhone X for an explanation of safe area insets.

[mosabab]

@dpa99c

I know that safe-area-inset can be used in the main cordova webview, but for standard method, inappbrowser should work as Safari work for ios devices, so, because inappbrowser main purpose to load external websites, you can't control all websites, so, it is a nice idea to make inappbrowser uses safe margins in landscape mode only for iphone x devices. (you can make this as an option for inappbrowser).

(safari app using safe margins in landscape mode for iphone x devices, and gray background appear , please open safari app in iphone x to see what i mentioned).

Anyway, this is not a big problem, my idea is just to make better impression to the users.

And, from now, most companies start to make phone devices to be full margins edge on the screen like: iphone x family devices, samsung galaxsy s10 devices...... etc.

Regards

[dpa99c]

I've had a go a fixing this so the status bar is hidden in landscape and shown in portrait orientation, but the changes require an understanding of the native iOS view hierarchy (mine is minimal and I don't have the need to expand it), so I'm going to have to leave this to someone with more native iOS UI experience.

An ideal fix would work both with cordova-plugin-statusbar being present and not present.

To automatically set the background color of the status bar in the inappbrowser window to the same as that specified in cordova-plugin-statusbar would requires changes to cordova-plugin-statusbar to publicly expose its settings so this plugin could read them. It would be much simpler just to allow the status bar color to be specified as an option in this plugin and the host app can then pass the same color value to both cordova-plugin-statusbar and this plugin, and similarly allow programmatic show/hide of the status bar (as cordova-plugin-statusbar does). In essence, a port of the functionality from cordova-plugin-statusbar to this plugin.

[mosabab]

@dpa99c

So, now, I think the only big problem need to be solved to fix the status bar height in master version of inappbrowser. (portrait mode)

Regards

[dpa99c]

@dpa99c

So, now, I think the only big problem need to be solved to fix the status bar height in master version of inappbrowser. (portrait mode)

Regards

that at least I think I can help with: it's currently hard-coded at 20px on master of this plugin, so I can at least bring that across the change from popupbridge as a PR which applies the device-specific value.
but the orientation change stuff is beyond me 😒

[mosabab]

@dpa99c

I check safari app in landscape mode at iphone x, there is no status bar appear.

So inapbrowser should remove grey bar in landscape mode for iphone x devices as safari, instead of grey bar.

Regards

[dpa99c]

@mosababubakr that's also what cordova-plugin-statusbar does to the main Cordova app Webview when installed, but I have been unable to so far translate that behaviour to the Inappbrowser Webview (due to my limited experience with native iOS UI components/view hierarchy).

I've had a go at setting the correct statusbar height in portrait in this plugin (as my popupbridge fork now does) but there must be some difference now between them, because the code that works in popupbridge does not work when I translate it to this plugin. When I have time, I will investigate further. Or hope that someone with more native iOS UI experience picks up this issue and fixes it before me 😀

[mosabab]

@dpa99c

I found that if you set usewkwebview=yes, then the status bar will overlays the main view and distort it, and also, for landscape view if you set usewkwebview=yes, then the screen for iphone x not fit correctly, so, i back to default behavior (aka usewkwebview=no) or omit this option, without face any problem.

So, if you tend to complete support the option usewkwebview=yes, then I think you can improve this option to fit and work correctly for iphone x, so, you can rebuild this option by adding the support of wkwebview without change the behavior of style.

Regards

[KishoreKoushik]

Hi @dpa99c ,may I know when this fix will be merged to master of inappbrowser?

[dpa99c]

@KishoreKoushik I've not been able to fix this issue (see my comment above)

[KishoreKoushik]

@dpa99c But I used, cordova-plugin-inappbrowser-popup-bridge and I don't see the overlap issue anymore. The what is the issue with the above plugin

[dpa99c]

dpa99c commented on 8 Mar

I've had a go at setting the correct statusbar height in portrait in this plugin (as my popupbridge fork now does) but there must be some difference now between them, because the code that works in popupbridge does not work when I translate it to this plugin.

I've not been able to translate that code from popupbridge IAB to this plugin and get it working.
And right now I don't have the time to try again.
But this is open-source software so you are welcome to try fixing it yourself 😀

[mosabab]

This issue not solved until now !!!!

no any one can solve this big problem ???

where are you programmers ?

[mosabab]

@dpa99c Hello,

Is there any solution for this issue ?

I think iphone x family devices and upper versions still face this issue.

[mosabab]

@dpa99c
Could you please take a look to this comment please:

#301 (comment)

[dpa99c]

@mosababubakr I'm busy with many other things at the moment - when I have time, I'll take a look

[jacobweber]

See also: https://issues.apache.org/jira/browse/CB-13583

[edskeizer]

I have altered the CDVInAppBrowserNavigationController.m in this repo, which works in my project. It seems the double bar is created when the device has the Dark mode option set to 'on'. In my code I have set the height of the statusbar to 44 when it is a device with a notch.

edskeizer@01f1b5e

[jcesarmobile]

closing as duplicate of #301