(ios) Remove fake status bar with hardcoded height to fix issues in iOS devices with a notch #656

PDLMobileApps · 2020-03-26T17:50:33Z

Platforms affected

iOS

Motivation and Context

IAB adds what has been referred as a "fake status bar" that creates issues on devices with a notch, such as iPhone X/XS/XM, etc.
In order to fix such issues, the fake status bar has to be removed.

Fixes: #604, #638, #301

Related to: #546, #265

Description

The fake status bar is removed from the IAB window and both height and the position of the IAB window is modified to account for the (real) iOS status bar. That is needed to correctly display the content of the iOS status bar without overlapping the content in the IAB window in portrait mode.
The color of the iOS status bar is set to transparent to match the background color of the underlying Cordova app.

Testing

Testing was done manually as I am not sure on how to automate it.

Created a new Cordova test app using cordova-plugin-inappbrowser.
Executed:
cordova.InAppBrowser.open(url, "_blank", "");
and verified that the iOS status bar is shown around the notch and the web view is displayed just below the iOS status bar (default behavior for iOS apps). The status bar color matches the background color of the underlying Cordova app.
Executed:
cordova.InAppBrowser.open(url, "_blank", "toolbar=yes,toolbarposition=top");
and verified that the iOS status bar is shown around the notch, the toolbar is displayed just below the iOS status bar and the web view is displayed just below the toolbar (default behavior for iOS apps). The status bar color matches the background color of the underlying Cordova app.
Executed:
cordova.InAppBrowser.open(url, "_blank", "toolbar=yes,toolbarposition=top");
on a device without notch and verified that the iOS status bar is shown on the top of the screen, the toolbar is displayed just below the iOS status bar and the web view is displayed just below the toolbar (default behavior for iOS apps). The status bar color matches the background color of the underlying Cordova app.

The tests above were executed for both portrait and landscape orientation. Note that in landscape mode, no status bar is displayed, which is the default iOS behavior for that mode with any app.

Checklist

I've run the tests to see all new and existing tests pass
I added automated test coverage as appropriate for this change
Commit is prefixed with (platform) if this change only applies to one platform (e.g. (android))
If this Pull Request resolves an issue, I linked to the issue in the text above (and used the correct keyword to close issues using keywords)
I've updated the documentation if necessary

…OS devices with a notch

jcesarmobile · 2020-03-27T11:44:20Z

what's the point of keeping the bgToolbar if you just set it to clearColor? shouldn't you just remove all the references to it?

PDLMobileApps · 2020-03-31T21:58:00Z

what's the point of keeping the bgToolbar if you just set it to clearColor? shouldn't you just remove all the references to it?

I removed the bgToolbar and retested: everything worked fine. I am going to commit the change. Thanks for pointing it out.

NiklasMerz

I did a quick test and the code looks good to me. Thank you for your contribution.

I found a small bug. If you open an InAppBrowser window and turn your iPhone (no notch) from portrait to horizontal the statusbar height is not changed and you can see your app below the IAB window. If you start IAB in horizontal and turn your phone the statusbar is white in my case and you cannot read the text.

Looks like the views need to reposition in this case.

…lified the code

PDLMobileApps · 2020-04-03T05:50:07Z

I did a quick test and the code looks good to me. Thank you for your contribution.

I found a small bug. If you open an InAppBrowser window and turn your iPhone (no notch) from portrait to horizontal the statusbar height is not changed and you can see your app below the IAB window. If you start IAB in horizontal and turn your phone the statusbar is white in my case and you cannot read the text.

Looks like the views need to reposition in this case.

Thanks for finding this issue. It should be fixed in my last commit. I also refactored/simplified the code. In my tests if worked fine with devices with and without notch, with top toolbar enabled and disabled.

NiklasMerz

Tests on non-notch iPhone and notch Simulator are good for me. Code looks good but someone else should have a look. :-)

NiklasMerz

Good from my side 👍

NiklasMerz · 2020-04-09T15:12:59Z

@PDLMobileApps Could you please resolve the conflict? I don't want to break it :-)

I would like to invite others to review before merging it first. Sorry it might take some time for people to find time. I will add some people that understand this better.

PDLMobileApps · 2020-04-09T15:42:09Z

@PDLMobileApps Could you please resolve the conflict? I don't want to break it :-)

I would like to invite others to review before merging it first. Sorry it might take some time for people to find time. I will add some people that understand this better.

Sure, that's fine. The conflict is resolved, by the way.

mosabab · 2020-04-23T15:55:26Z

@NiklasMerz

Did you try to build iOS for this pull ?

I try to build iOS using cordova build, but the build failed for this pull.

PDLMobileApps · 2020-04-23T15:59:46Z

@NiklasMerz

Did you try to build iOS for this pull ?

I try to build iOS using cordova build, but the build failed for this pull.

I am using this PR in a prod environment. I build multiple times a day for iOS and got zero issues. You may want to delete your platform folder, plugins folder, package.json and package-lock.json then retry.

mosabab · 2020-04-23T18:22:02Z

@PDLMobileApps

My friend, i create a new empty app and add platform and build it

Try many times also by removing the platforms and folders but the build failed.

If anyone can test it from their sides to check the problem.

I am using:

The latest version of
Cordova-cli

Corodva-ios master version

Xcode latest version.

What i remeber about the build error was about something of objective-c .....

PDLMobileApps · 2020-04-23T19:21:00Z

@PDLMobileApps

My friend, i create a new empty app and add platform and build it

Try many times also by removing the platforms and folders but the build failed.

If anyone can test it from their sides to check the problem.

I am using:

The latest version of
Cordova-cli

Corodva-ios master version

Xcode latest version.

What i remeber about the build error was about something of objective-c .....

Just created and tested an iOS build using the bug-hardcodedstatusbar branch where the changes for this PR were made. I confirm that everything works fine.

mosabab · 2020-04-23T22:13:28Z

Message from cordova build:

** BUILD FAILED **

The following build commands failed:
CompileC /var/root/Library/Developer/Xcode/DerivedData/testapp-hhqojpudddigfmcqzttvqbyvtkwp/Build/Intermediates.noindex/testapp.build/Debug-iphonesimulator/testapp.build/Objects-normal/x86_64/CDVWKInAppBrowser.o /Users/mosabab/Documents/testapp/platforms/ios/testapp/Plugins/cordova-plugin-inappbrowser/CDVWKInAppBrowser.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
xcodebuild: Command failed with exit code 65`

Please note: i am using the latest xcode v11.4.1
Cordova-CLI: 9.0.0 (cordova-lib@9.0.1)
cordova-ios : #master version
cordova-inappbrowser-plugin (bug-hardcodedstatusbar branch)
(https://github.com/PDLMobileApps/cordova-plugin-inappbrowser/tree/bug-hardcodedstatusbar)

vadimwe · 2020-05-06T07:18:15Z

Works excellent. Thanx for fix guys.

HYPE-Thomas · 2020-05-25T13:19:10Z

Hey guys, any idea when this PR will get merged?

lukas-mertens · 2020-05-26T08:20:07Z

+1 this is a blocker for me as well...

artberri · 2020-05-27T08:07:24Z

I tested it also and it works ok. Thanks for the fix.

NiklasMerz · 2020-06-02T06:14:39Z

@jcesarmobile @dpa99c Do you have time for a quick review? What do you think?

dpa99c · 2020-06-03T12:49:08Z

@NiklasMerz sorry started to review this yesterday and got side-tracked.
Will try to review/test today/tommorrow.

dpa99c

Tested and looks good to me

NiklasMerz · 2020-06-04T14:31:47Z

@dpa99c Thanks for the review

HYPE-Thomas · 2020-06-04T14:35:26Z

Great! Thanks a lot!!

mosabab · 2020-06-04T14:41:41Z

Thanks for the review and test, nice job!

artberri · 2020-06-04T15:39:34Z

Thank you!

mosabab · 2020-06-05T00:34:42Z

@PDLMobileApps @NiklasMerz @dpa99c
Thanks for help with this issue.

I try to test it in my mac
but the build failed

Here the message:

The following build commands failed:
CompileC /var/root/Library/Developer/Xcode/DerivedData/myapp-fwtbwlotgipnwyfynxipdyoqnfgg/Build/Intermediates.noindex/myapp.build/Debug-iphonesimulator/testapp.build/Objects-normal/x86_64/CDVWKInAppBrowser.o /Users/mosab/Documents/myapp/platforms/ios/testapp/Plugins/cordova-plugin-inappbrowser/CDVWKInAppBrowser.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
xcodebuild: Command failed with exit code 65

I opened project in xcode to see what the errors,

I see this error:

/Users/mosab/Documents/myapp/platforms/ios/testapp/Plugins/cordova-plugin-inappbrowser/CDVWKInAppBrowser.m:1250:42: No known instance method for selector 'shouldAutorotateToInterfaceOrientation:'

Could you please investigate about this issue ?

Thanks !

breautek · 2020-06-05T00:48:33Z

@mosabab You should create a new issue with the bug form filled out.

mosabab · 2020-06-05T00:57:16Z

@mosabab You should create a new issue with the bug form filled out.

thanks for advice.

breautek · 2020-06-05T01:23:48Z

@NiklasMerz

Do you know why the following code was re-added?

cordova-plugin-inappbrowser/src/ios/CDVWKInAppBrowser.m

Lines 1247 to 1254 in 04ce789

    
           - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation 
        
           { 
        
               if ((self.orientationDelegate != nil) && [self.orientationDelegate respondsToSelector:@selector(shouldAutorotateToInterfaceOrientation:)]) { 
        
                   return [self.orientationDelegate shouldAutorotateToInterfaceOrientation:interfaceOrientation]; 
        
               } 
        
               return YES; 
        
           }

Appears to be a regression, as pointed out by #714 (comment)

NiklasMerz · 2020-06-05T07:04:33Z

@NiklasMerz

Do you know why the following code was re-added?

cordova-plugin-inappbrowser/src/ios/CDVWKInAppBrowser.m

Lines 1247 to 1254 in 04ce789

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

{

if ((self.orientationDelegate != nil) && [self.orientationDelegate respondsToSelector:@selector(shouldAutorotateToInterfaceOrientation:)]) {

return [self.orientationDelegate shouldAutorotateToInterfaceOrientation:interfaceOrientation];

}

return YES;

}

Appears to be a regression, as pointed out by #714 (comment)

Looks like a merge conflict.I don't really understand it. Preparing a PR to fix it. Code was removed in #666

Merging issue from #656 Closes #714

Fix merging issue from #656 Closes #714

mosabab · 2020-08-06T14:50:11Z

@NiklasMerz Hello, sorry for the mention, but I have a question please regarding this PR.

After this PR remove the fake statusbar, I face a problem with transparent statusbar after inappbrowser appear.

How we can handle this to make status bar visible when inappbrowser opened?

Does you have a solution for it? because I don't see any information regarding this.

Regards

PDLMobileApps · 2020-08-06T15:01:53Z

@NiklasMerz Hello, sorry for the mention, but I have a question please regarding this PR.

After this PR remove the fake statusbar, I face a problem with transparent statusbar after inappbrowser appear.

How we can handle this to make status bar visible when inappbrowser opened?

Does you have a solution for it? because I don't see any information regarding this.

Regards

You can add the cordova-plugin-status bar and set the status bar color like this:
<preference name="StatusBarBackgroundColor" value="#242021" />

mosabab · 2020-08-11T10:41:25Z

@NiklasMerz Hello, sorry for the mention, but I have a question please regarding this PR.
After this PR remove the fake statusbar, I face a problem with transparent statusbar after inappbrowser appear.
How we can handle this to make status bar visible when inappbrowser opened?
Does you have a solution for it? because I don't see any information regarding this.
Regards

You can add the cordova-plugin-status bar and set the status bar color like this:
<preference name="StatusBarBackgroundColor" value="#242021" />

Thanks for information, I try it and work correctly.

But what about if user change the device to dark theme or light theme?

I think the statusbar color work in dark theme and in other ways in light themes.
(if the StatusBarBackgroundColor is dark and the statusbar color in light it work, but if user change to light then the statusbar color not appear)

How we can handle this?

Thanks

mosabab · 2020-08-25T01:17:23Z

@PDLMobileApps
Please take a look for this issue:

#728

I face this issue as others.

How we can deal with your pull and dark theme for iOS?

DevEdward666 · 2022-04-07T05:31:00Z

I Have an issue on IOS specifically on Iphone with notch iphone X to 13.
can someone help me with this problem?

(ios) Removed fake statusbar with hardcoded height to fix issues in i…

e349235

…OS devices with a notch

(ios) Removed no longer needed bgToolbar

fc7c32b

NiklasMerz requested changes Apr 1, 2020

View reviewed changes

(ios) Fixed issue with rotation in landscape mode and refactored/simp…

a9b7d4d

…lified the code

NiklasMerz linked an issue Apr 3, 2020 that may be closed by this pull request

Issue with status bar on iPhone X when toolbar is at the top (v3.0.0) #301

Closed

NiklasMerz approved these changes Apr 3, 2020

View reviewed changes

PDLMobileApps requested a review from NiklasMerz April 9, 2020 14:24

NiklasMerz approved these changes Apr 9, 2020

View reviewed changes

NiklasMerz requested review from dpa99c and jcesarmobile April 9, 2020 15:15

Merge branch 'master' into bug-hardcodedstatusbar

41c9271

NiklasMerz mentioned this pull request Apr 14, 2020

Build with Xcode11 causes status bar rotate #623

Closed

3 tasks

NiklasMerz requested a review from erisu June 2, 2020 18:24

dpa99c approved these changes Jun 4, 2020

View reviewed changes

dpa99c added a commit to dpa99c/cordova-plugin-inappbrowser-popup-bridge that referenced this pull request Jun 4, 2020

Patch in iPhoneX notch fix from apache/cordova-plugin-inappbrowser#656

9b8f923

NiklasMerz merged commit 2706f34 into apache:master Jun 4, 2020

asgeo1 mentioned this pull request Jun 5, 2020

[iOS] No known instance method for selector 'shouldAutorotateToInterfaceOrientation:' #714

Closed

3 tasks

NiklasMerz added a commit that referenced this pull request Jun 5, 2020

(ios): fix regression in 2706f34

b20d7e3

Merging issue from #656 Closes #714

NiklasMerz mentioned this pull request Jun 5, 2020

(ios): fix regression in #656 #715

Merged

5 tasks

dpa99c added a commit to dpa99c/cordova-plugin-inappbrowser-popup-bridge that referenced this pull request Jun 5, 2020

Patch in iPhoneX notch fix from apache/cordova-plugin-inappbrowser#656

3c9c1b1

NiklasMerz added a commit that referenced this pull request Jun 5, 2020

(ios): fix regression in 2706f34 (#715)

0903452

Fix merging issue from #656 Closes #714

mrbberra mentioned this pull request Jun 12, 2020

[iOS] Set StatusBarStyle from config.xml #728

Closed

breautek mentioned this pull request Jun 23, 2020

Keep status bar color when browser popup #321

Open

NiklasMerz mentioned this pull request Jul 9, 2020

(ios) removing hard coded height #629

Closed

5 tasks

mrbberra mentioned this pull request Aug 18, 2020

(ios) Add InAppBrowserStatusBarStyle preference #765

Merged

5 tasks

jcesarmobile mentioned this pull request Nov 4, 2023

fix(ios): Remove deprecation warnings and old code #1031

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(ios) Remove fake status bar with hardcoded height to fix issues in iOS devices with a notch #656

(ios) Remove fake status bar with hardcoded height to fix issues in iOS devices with a notch #656

PDLMobileApps commented Mar 26, 2020

jcesarmobile commented Mar 27, 2020

PDLMobileApps commented Mar 31, 2020

NiklasMerz left a comment •

edited

Loading

PDLMobileApps commented Apr 3, 2020

NiklasMerz left a comment

NiklasMerz left a comment

NiklasMerz commented Apr 9, 2020 •

edited

Loading

PDLMobileApps commented Apr 9, 2020

mosabab commented Apr 23, 2020

PDLMobileApps commented Apr 23, 2020

mosabab commented Apr 23, 2020 •

edited

Loading

PDLMobileApps commented Apr 23, 2020

mosabab commented Apr 23, 2020 •

edited

Loading

vadimwe commented May 6, 2020

HYPE-Thomas commented May 25, 2020

lukas-mertens commented May 26, 2020

artberri commented May 27, 2020

NiklasMerz commented Jun 2, 2020

dpa99c commented Jun 3, 2020

dpa99c left a comment

NiklasMerz commented Jun 4, 2020

HYPE-Thomas commented Jun 4, 2020

mosabab commented Jun 4, 2020

artberri commented Jun 4, 2020

mosabab commented Jun 5, 2020 •

edited

Loading

breautek commented Jun 5, 2020

mosabab commented Jun 5, 2020

breautek commented Jun 5, 2020

NiklasMerz commented Jun 5, 2020

mosabab commented Aug 6, 2020

PDLMobileApps commented Aug 6, 2020

mosabab commented Aug 11, 2020 •

edited

Loading

mosabab commented Aug 25, 2020

DevEdward666 commented Apr 7, 2022

(ios) Remove fake status bar with hardcoded height to fix issues in iOS devices with a notch #656

(ios) Remove fake status bar with hardcoded height to fix issues in iOS devices with a notch #656

Conversation

PDLMobileApps commented Mar 26, 2020

Platforms affected

Motivation and Context

Description

Testing

Checklist

jcesarmobile commented Mar 27, 2020

PDLMobileApps commented Mar 31, 2020

NiklasMerz left a comment • edited Loading

Choose a reason for hiding this comment

PDLMobileApps commented Apr 3, 2020

NiklasMerz left a comment

Choose a reason for hiding this comment

NiklasMerz left a comment

Choose a reason for hiding this comment

NiklasMerz commented Apr 9, 2020 • edited Loading

PDLMobileApps commented Apr 9, 2020

mosabab commented Apr 23, 2020

PDLMobileApps commented Apr 23, 2020

mosabab commented Apr 23, 2020 • edited Loading

PDLMobileApps commented Apr 23, 2020

mosabab commented Apr 23, 2020 • edited Loading

vadimwe commented May 6, 2020

HYPE-Thomas commented May 25, 2020

lukas-mertens commented May 26, 2020

artberri commented May 27, 2020

NiklasMerz commented Jun 2, 2020

dpa99c commented Jun 3, 2020

dpa99c left a comment

Choose a reason for hiding this comment

NiklasMerz commented Jun 4, 2020

HYPE-Thomas commented Jun 4, 2020

mosabab commented Jun 4, 2020

artberri commented Jun 4, 2020

mosabab commented Jun 5, 2020 • edited Loading

breautek commented Jun 5, 2020

mosabab commented Jun 5, 2020

breautek commented Jun 5, 2020

NiklasMerz commented Jun 5, 2020

mosabab commented Aug 6, 2020

PDLMobileApps commented Aug 6, 2020

mosabab commented Aug 11, 2020 • edited Loading

mosabab commented Aug 25, 2020

DevEdward666 commented Apr 7, 2022

NiklasMerz left a comment •

edited

Loading

NiklasMerz commented Apr 9, 2020 •

edited

Loading

mosabab commented Apr 23, 2020 •

edited

Loading

mosabab commented Apr 23, 2020 •

edited

Loading

mosabab commented Jun 5, 2020 •

edited

Loading

mosabab commented Aug 11, 2020 •

edited

Loading