Ionic 3.X Weird Extra Top Padding For Ion-Content #13229
Comments
|
Hello! Thank you for opening an issue with us! Please check that you are using WKWebView and not UIWebView. If you have this plugin installed, you are using WKWebView (which is what you want) Using WKWebView has a few caveats that may need to be dealt with in your app. However it is the proper way forward for many reasons. http://ionicframework.com/docs/wkwebview/ If you are using WKWebView and still are having the issue, would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic! |
|
Thanks @kensodemann for the reply! I tried to upgrade to One app I'm developing, I can upgrade to Is there any way to fix this issue so it doesn't happen in either Some other forum posts also recommend upgrading to |
|
For the CORs issues, have you tried this? http://ionicframework.com/docs/wkwebview/#cors
According to my understanding of issue #12958 (which I think is the same as what you are seeing), no. It is due to a bug in UIWebView (which is an Apple thing that we can do nothing about, and it is the older of the web views and Apple has been suggesting ppl use WKWebView since iOS 8 or 9, so I don't really see it getting much love from Apple, honestly). However, if updating to WKWebView did not fix the issue for you, there may be more going on. Can you duplicate this in a sample application? Basically, start with whatever starter is closest to your app's architecture and add the minimal stuff required to get it to happen and then upload to GitHub? Unless, of course, your app itself is already in a public repo. One other thing to check would be that everything here is handled: https://blog.ionic.io/ios-11-checklist/ |
|
Thanks @kensodemann, I'll review https://blog.ionic.io/ios-11-checklist/ again to see if I missed something. It does seem like a similar issue to #12958. Another weird thing I noticed, when the extra spacing appears, it's like the content behind has moved down but the touch area has not. For example, to select a |
|
This should be address via This will be the nightly version |
|
When you'll release this version? I mean |
|
Weird @mhartington, even with the The view loads fine but any kind of rebinding to data, the extra space appears. However using the |
|
Here's the details of the |
|
And here's the details from |
|
I can confirm same issue and this is fixed in WKWebView, however same display issue persists CDVUIWebViewEngine. Easy to produce just create blank app and put in home.html
And as soon as you tap in the search bar the content moves down about 20px and sometimes when you go back to previous pages they actually bump up under header and partially hidden. We cannot move to WKWebView until it works properly with cookies (mostly works on device, but always fails on simulator) so we would be grateful to have CDVUIWebViewEngine working again as it used too. |
|
Hmm, I am unable to replicate at all with ionic-angular 3.8.0 (just released) |
|
I tried with 3.8.0, problem still exists. |
|
Also getting this on 3.8.0. Problem seems to be a style applied to .scroll-content: If you set padding-top: 0 !important it goes away |
|
Thats not really the proper solution. So it's only visible if there is no ion-header? That css is only applied when ion-content is the first element. I will test that out. |
|
Hmm, Im not able to replicate it still. This is looking fine with the latest release. |
|
Yes works fine in EMULATOR. Does not work on real device. And I am using default ion-header per start blank project. |
|
Alright, I check it out
Mike Hartington
… On Oct 27, 2017, at 10:05 AM, sjdrew ***@***.***> wrote:
Yes works fine in EMULATOR. Does not work on real device. And I am using default ion-header per start blank project.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
In case it helps, I found that adding no-bounce to ion-content prevents the issue. Steve. |
|
Actually forget that, after cold starting the app with the "no-bounce" it still has the problem. |
|
@mhartington did you try testing on a simulator other than I've been having my issues on iOS 11 on iPhone SE, iPhone7, etc emulators. |
|
Yes, I've been using iphone 6/7, but sim and real devices Sim Device If someone can replicate this, please provide a minimal project. Otherwise, Im going to have to close this as I cannot reproduce at all. |
|
Here is how I can reproduce it. However for some reason generating a new blank project today it only happens about 1 in 3 tries as opposed to an upgraded one.
See screen shot and notice the cursor flashes above the input field. This is the behaviour I now see in a few apps after upgrading ionic and running ios 11.0.3. Simulator works fine.
|
|
Ah, alright @sjdrew so the main issue here is UIWebview. Using WKWebview is the solution to this. |
|
I wish it were that easy, have bunch of apps to convert to WKWebView, but still have issues with WKWebView that will take lots of work to workaround and previous cookie handling and app state already in UIWebView so it is not a practical solution. Is there any workaround that you can think of, I see many people running into this issue as know of many in same situation as us that WKWebview will not work for them. I did not read anything that said UIWebview was no longer supported as documentation shows how to use either view. Thanks. |
WKWebview is mostly a drop in replacement for UIWebview, and anything that you need to know is covered in this doc. http://ionicframework.com/docs/wkwebview/
Unfortunately, we're at the mercy of UIWebview/Apple here. Because it is a Core piece of iOS, we're not able to make any modification to it or change it behaviour. The way to "fix" this is to use WKWebview.
You can use UIWebview, but there are several major issues that will come from it. Especially with iOS 11 and the new safe-area margins, which get reported incorrectly (again at the native level so we cannot fix/hack to work). I will note, I tried this again with UIWebview and a prod build of an app but could not reproduce with the steps provided. It seems very inconsistent (pretty much UIWebview's main issue) |
|
OK Thanks, I understand. Probably be prepared for this topic to come up a lot for anyone upgrading and using cookies in their app.
FYI this issue ionic-team/cordova-plugin-ionic-webview#22 … Is one of the main reasons stopping people from running WKWebView (from my experience), if someone could fix the cookie issue that would mean WKWebview would be a working drop in replacement.
If I take any of my apps that were using cookies and convert to WKWebview they fail in the simulator 100%.
Steve.
From: Mike Hartington <[email protected]>
Reply-To: ionic-team/ionic <[email protected]>
Date: Monday, October 30, 2017 at 10:09 AM
To: ionic-team/ionic <[email protected]>
Cc: Steve Drew <[email protected]>, Mention <[email protected]>
Subject: Re: [ionic-team/ionic] Ionic 3.X Weird Extra Top Padding For Ion-Content (#13229)
I wish it were that easy, have bunch of apps to convert to WKWebView,
WKWebview is mostly a drop in replacement for UIWebview, and anything that you need to know is covered in this doc. http://ionicframework.com/docs/wkwebview/
Is there any workaround that you can think of
Unfortunately, we're at the mercy of UIWebview/Apple here. Because it is a Core piece of iOS, we're not able to make any modification to it or change it behaviour. The way to "fix" this is to use WKWebview.
I did not read anything that said UIWebview was no longer supported
You can use UIWebview, but there are several major issues that will come from it. Especially with iOS 11 and the new safe-area margins, which get reported incorrectly (again at the native level so we cannot fix/hack to work).
I will note, I tried this again with UIWebview and a prod build of an app but could not reproduce with the steps provided. It seems very inconsistent (pretty much UIWebview's main issue)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
OK good news. Just upgrade to iOS 11.1 and problem is gone, so far tried many times to reproduce and no display issues. (With UiWebView) Steve. |
|
@sjdrew @mhartington just some followup. On one project, upgrading and switching to However on another project, which sets So perhaps there is still a lingering issue, with both |
|
Unfortunately, the complications that cordova-plugin-ionic-webview (or WKWebView) creates with cookies, XHR requests, etc... make it a deal breaker. Instead, I fixed this extra spacing by adding For more info see https://issues.apache.org/jira/browse/CB-12886 & #13208 and |
|
my two cents to this issue: I have WKWebView plugin installed. I was still seeing this To fix this, all I did was move and I did observe the issue again in any ios versions or model (including iphone X). |
|
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x
[ ] 4.x
I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
Current behavior:
Since upgrading to
ionic-angular 3.7.1, I've been experiencing a weird top padding issues withion-content.Initially the view loads fine, however after interacting with the view like rebinding data or refreshing using the
ion-refresher, the top of theion-contentgets shifted down with extra top padding, which appears the same height as the status bar.Oddly enough, text that has
user-select: textenabled in the CSS to allow copy & paste, is being highlighted where the input is suppose to be rather than where it is.Expected behavior:
The content padding should be consistent, and not changed after interacting with the view.
Steps to reproduce:
Before
After
The text was updated successfully, but these errors were encountered: