Comments (30)
In addition to setting statusBarFrame.size.height = 0;
i also ended up doing something like following that does not entirely rely on the hardcoded STATUSBAR_HEIGHT. Following code adds top and bottom safeareas for the view (Since we have no control for 3rd party app that we are using inside IAB and it is easier to handle in the InAppBrowser).
CDVWKInAppBrowser.m:
- (BOOL)hasTopNotch {
if (@available(iOS 11.0, *)) {
return [[[UIApplication sharedApplication] delegate] window].safeAreaInsets.top > 20.0;
}
return NO;
}
- (void)viewWillAppear:(BOOL)animated
{
if (IsAtLeastiOSVersion(@"7.0") && !viewRenderedAtLeastOnce) {
viewRenderedAtLeastOnce = TRUE;
CGRect viewBounds = [self.webView bounds];
if ([self hasTopNotch]) {
BOOL toolbarVisible = !self.toolbar.hidden;
BOOL toolbarIsAtBottom = ![_browserOptions.toolbarposition isEqualToString:kInAppBrowserToolbarBarPositionTop];
float topSafeArea = [[[UIApplication sharedApplication] delegate] window].safeAreaInsets.top;
float bottomSafeArea = [[[UIApplication sharedApplication] delegate] window].safeAreaInsets.bottom;
if (toolbarVisible && toolbarIsAtBottom) {
bottomSafeArea = 0.0;
}
viewBounds.origin.y = topSafeArea;
viewBounds.size.height = viewBounds.size.height - (topSafeArea + bottomSafeArea);
} else {
viewBounds.origin.y = STATUSBAR_HEIGHT;
viewBounds.size.height = viewBounds.size.height - STATUSBAR_HEIGHT;
}
self.webView.frame = viewBounds;
[[UIApplication sharedApplication] setStatusBarStyle:[self preferredStatusBarStyle]];
}
[self rePositionViews];
[super viewWillAppear:animated];
}
The logic for hasTopNotch is from here: https://stackoverflow.com/questions/46192280/detect-if-the-device-is-iphone-x.
In addition to that, I removed they gray-background: self.view.backgroundColor = [UIColor grayColor];
and replaced it with configurable option for background color and UIStatusBarStyleLightContent or UIStatusBarStyleDefault. This way the view is seamless since the background matches statusbar and bottom safearea background colors.
from cordova-plugin-inappbrowser.
I did a quick test again with the test app and it looks good to me. Please test this yourself with your app. You may need to adjust your HTML and CSS to make it look good. There should be plenty Google results for that.
from cordova-plugin-inappbrowser.
from cordova-plugin-inappbrowser.
from cordova-plugin-inappbrowser.
@russcarver is this something I can fix when using Phonegap Build? Or is this an update waiting to happen?
from cordova-plugin-inappbrowser.
@vespino I'm waiting for them to fix this. In the mean time, I've just forked it and made the changes shown above.
from cordova-plugin-inappbrowser.
@russcarver can I use your fork?
from cordova-plugin-inappbrowser.
@vespino I don't have it anymore as I decided to go a different route, but if you fork it yourself and make the change outlined above, it will work fine. You can install plugins from local directories using the "cordova plugin add" command.
from cordova-plugin-inappbrowser.
@russcarver then I was just in time :)
from cordova-plugin-inappbrowser.
@russcarver do you mind sharing the different route btw?
And do you mind pointing me to where the changes have to be made? I can't seem to find "statusBarFrame.size.height = STATUSBAR_HEIGHT;" in this file: https://github.com/vespino/cordova-plugin-inappbrowser/blob/master/src/ios/CDVInAppBrowser.m
from cordova-plugin-inappbrowser.
@russcarver think I have found it in this file: https://github.com/vespino/cordova-plugin-inappbrowser/blob/master/src/ios/CDVInAppBrowserNavigationController.m
from cordova-plugin-inappbrowser.
Mine was in the other file, but it could be outdated by now. You can also just change the #define of the constant since it looks used in only that one place.
from cordova-plugin-inappbrowser.
@russcarver seems like the change I made indeed solves the statusbar issue, but raises another one. When opening a link in the inappbrowser and closing it, the app freezes on iOS. You would think the guys at phonegap would have addressed this issue more than a year after introduction of the iPhone X.
from cordova-plugin-inappbrowser.
@vespino Sorry to hear that. That didn't happen to me in my tests, but I didn't test it out on iOS 12. Any details about your environment shared here may help the code owner debug.
from cordova-plugin-inappbrowser.
@russcarver I'm using this fork of themeable browser now: https://github.com/toontoet/cordova-plugin-themeablebrowser.git
from cordova-plugin-inappbrowser.
It seems to fix also the issue if you just remove the setting of the height
Remove this line from CDVInAppBrowserNavigationController.m:
statusBarFrame.size.height = STATUSBAR_HEIGHT;
Btw Statusbar height should be 44pt. I don't understand that why the statusbar height is hardcoded anyway.
#define STATUSBAR_HEIGHT 20.0
from cordova-plugin-inappbrowser.
Besides this fix just pulls the transparent grayish backdrop/overlay to top of the viewport and not the inappbrowser-view.
[EDIT]:
What is the grayish overlay anyway? Why is it needed? Shouldn't it just show the statusbar with defined color and not overlay with it that half transparent gray overlay?
from cordova-plugin-inappbrowser.
@mtlehtin You could probably create a pull request with this fix.
from cordova-plugin-inappbrowser.
@mtlehtin I would also appreciate a pull request for your solution
from cordova-plugin-inappbrowser.
inappbrowser-wkwebview is deprecated and it is merged with inappbrowser. There is no CDVWKInAppBrowser.m file anymore and if you implement @mtlehtin change in the CDVInAppBrowser.m it doesnt fix the issue... Any help?
from cordova-plugin-inappbrowser.
This seemed to fix the issue for me:
Credit to "Rouven Retzlaff (BERIS)" who had a fix for CDVWKInAppBrowser.m, but I needed it for CDVUIInAppBrowser.m so I ported it over.
from cordova-plugin-inappbrowser.
We solved this that way: GEDYSIntraWare@0c75a93
Should I create a PR?
from cordova-plugin-inappbrowser.
Hello @NiklasMerz
If you test your solution and work perfect on iphone x and previous version of iphone, you can create a PR for this solution, because this issue still not solved for iphone x family devices.
Regards
from cordova-plugin-inappbrowser.
Thanks @mosababubakr for testing. PR created. Thanks @mtlehtin for your code, I adapted if a little bit.
Looking forward for reviews.
from cordova-plugin-inappbrowser.
@mosababubakr Yes I already did that, but unfortunately I cannot add reviewers to PRs. But please be patient, Cordova maintainers do their work in free time. Dave has done a lot for this plugin recently.
from cordova-plugin-inappbrowser.
@NiklasMerz yes, you are correct, and we are appreciate that, thank you
Do you test this solution in landscape mode? (Does this solution also fix notch in landscape mode)?
Regards
from cordova-plugin-inappbrowser.
This doesn't fix this is in landscape mode. even though I have viewport-fit=cover with padding of safe-area-inset.. it doesn't work when u change orientation of inappbrowser. however if opened in landscaped mode works fine then rotate to portrait..doesn't! and vice versa. I am not sure how to set height and width of statusBarFrame detecting orientation change..there is transparent area (where OP has grey area) my notification bar of webpage sticks below notch but page content is displayed through transaparent area while scrolling! really bad User experience :( . I don't have toolbar, its a full screen InAppbrowser
from cordova-plugin-inappbrowser.
@mtlehtin : can you please elaborate on how did you configured option for background color and UIStatusBarStyleLightContent or UIStatusBarStyleDefault? i was able to fix the height issue with what you have suggested but i am not able to change the gray background color?
from cordova-plugin-inappbrowser.
Hi, sorry not for answering for these. I've not been involved in the project anymore.
But as for the background-color these are the code changes that i made in our internal fork:
CDVInAppBrowserOptions.h: Expose the options:
@property (nonatomic, assign) BOOL statusbarlightcontent;
@property (nonatomic, copy) NSString* backgroundcolor;
CDVWKInAppBrowser.m:
- (void)createViews
{
// ...
// Set background color if user sets it in options
if (_browserOptions.backgroundcolor != nil) {
self.view.backgroundColor = [self colorFromHexString:_browserOptions.backgroundcolor];
} else {
self.view.backgroundColor = [UIColor whiteColor];
}
[self.view addSubview:self.toolbar];
[self.view addSubview:self.addressLabel];
[self.view addSubview:self.spinner];
}
- (UIStatusBarStyle)preferredStatusBarStyle
{
return _browserOptions.statusbarlightcontent ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault;
}
Usage in the app:
window.cordova.InAppBrowser.open(url, target, 'backgroundcolor=#000000,statusbarlightcontent=yes|no')
from cordova-plugin-inappbrowser.
@mtlehtin : Thanks for the reply. I did those changes and well the status bar does appear but what happens is I have my toolbar on bottom, and the status bar with set color appears in the bottom on top of bottom toolbar instead of status bar appearing on top at its default place. Any idea what is wrong?
from cordova-plugin-inappbrowser.
Related Issues (20)
- Cannot build iOS Ionic Capacitor project HOT 5
- 6.0.0 Update throws error while archiving iOS project: "'Cordova/CDVWebViewProcessPoolFactory.h' file not found" HOT 1
- "browser.on('loaderror')" does not work properly on iOS.
- executeScript not working in colab HOT 4
- How to build this plugin for node_modules? HOT 2
- Add option to respect/ignore safe area on iOS
- ref.executeScript can't write clipboard HOT 5
- window.open doesnt work inside the opened webview HOT 2
- Warning when submitting to play store - JavaScript Interface Injection HOT 3
- @awesome-cordova-plugins/in-app-browser, this plugin is not sending the device id to azure while login + iOS HOT 3
- Angular 15 webpage not loading correctly in inappbrowser (Android < 11) HOT 1
- Hide Location & toolbar on scroll
- No visible @interface for 'UIApplication' when building an app for iOS HOT 2
- Can't Retrieve HTMLCollection Object HOT 1
- "The certificate authority is not trusted" - Trying to open my server page HOT 1
- beforeload preventing page navigation HOT 1
- Cannot load URL: Frame Load Interrupted being thrown on URL with a 302 redirect HOT 1
- InAppBrowser not fullscreen
- Unable to get events for _system as target HOT 1
- NullPointerException after resume
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cordova-plugin-inappbrowser.