Comments (29)
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.
from cordova-plugin-inappbrowser.
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).
from cordova-plugin-inappbrowser.
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?
from cordova-plugin-inappbrowser.
@cvanem I'm using this fork of themeable browser now: https://github.com/toontoet/cordova-plugin-themeablebrowser.git
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
Hello @dpa99c ,
Thanks for reply,
We wait your fix.
thanks
Regards.
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
@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 .
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
@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.
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
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.
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
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.
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
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 😒
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
@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 😀
from cordova-plugin-inappbrowser.
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
from cordova-plugin-inappbrowser.
Hi @dpa99c ,may I know when this fix will be merged to master of inappbrowser?
from cordova-plugin-inappbrowser.
@KishoreKoushik I've not been able to fix this issue (see my comment above)
from cordova-plugin-inappbrowser.
@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
from cordova-plugin-inappbrowser.
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 😀
from cordova-plugin-inappbrowser.
This issue not solved until now !!!!
no any one can solve this big problem ???
where are you programmers ?
from cordova-plugin-inappbrowser.
@dpa99c Hello,
Is there any solution for this issue ?
I think iphone x family devices and upper versions still face this issue.
from cordova-plugin-inappbrowser.
@dpa99c
Could you please take a look to this comment please:
from cordova-plugin-inappbrowser.
@mosababubakr I'm busy with many other things at the moment - when I have time, I'll take a look
from cordova-plugin-inappbrowser.
See also: https://issues.apache.org/jira/browse/CB-13583
from cordova-plugin-inappbrowser.
closing as duplicate of #301
from cordova-plugin-inappbrowser.
Related Issues (20)
- 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
- beforeload event behaviour difference between android and ios
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.