Ionic-framework: ion-content hidden behind ion-header on Android in Ionic 3.7

[charlierz]

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:
When you navigate to another page, open and dismiss the keyboard and go back to the previous page the ion-content will be hidden behind the ion-header.

Expected behavior:
ion-content not hidden behind the ion-header

Steps to reproduce:
Using the ionic-conference-app with version 3.7 or 3.7.1 of Ionic add a text input in session-detail.html.
Navigate to a session-detail through the schedule page.
Open and dismiss the keyboard with the text input added.
Go back to the schedule page.
You will now see some content is hidden behind the ion-header. If you change tabs it will restore.

[Reactor13]

We have this issue too.

[tgart]

Confirm, i have same problem. Problem generated when upgrade to 3.7+

[saschwarz]

I'm seeing this same behavior on iOS too. Forcing a content resize in the parent page (at least in my app) is a workaround:

export class LayoutsPage {
  @ViewChild('content') content: Content;
...
  ionViewDidEnter() {
    this.content.resize();
  }

I'm also seeing this problem if you change orientation in the child page (without opening a keyboard) and then return to the parent page and change the orientation back while on the parent page.

[claudiozam]

Same problem in ionic 3.7.1

[wormling]

Confirmed in ionic 3.7.1 on a Samsung galaxy note 4

[kensodemann]

Hello! Thank you for opening an issue with us!

I have duplicated this. Note to self: does not occur with 3.6.1, does occur starting with 3.7.0

Thank you for using Ionic

[mhartington]

This could be related to the iPhoneX css changed, though I would have thought the css was isolated to iOS only...

Could someone install ionic-angular@nightly and please test?

[charlierz]

Same problem with ionic-angular@nightly

[saschwarz]

Another test case is device rotation change while off the list view and returning to the list view.

Using the Ionic Conference app deployed on a physical device:

1. Holding the phone in portrait mode
2. Select the Schedule tab
3. Select the "8:00 am Breakfast entry"
4. Rotate the phone to landscape mode
5. Select the Back button to return to the Schedule list view.
6. The scroll position will hide the "8:00 am" header and part of the Breakfast entry. Changing the orientation again will fix the layout. Scroll to refresh doesn't fix the layout either.

[menegain]

I have this same bug with these steps :

1. In page pushed with NavController i focus a ion-input or ion-textarea
2. I close the keyboard and i click for back in my main page
3. See the bug : ion-list behind the header

This bug it's not declare when i back with my keyboard is open.

[huker]

I have same problem in ionic 3.7.1

[zakton5]

Also seeing this

[mariossavva]

I have the same issue with 3.7.1 and it also happens in the browser.

Basically from what I could tell when there is a resize while a pushed page is in view, the margin-top property get's removed from ion-content css and when you pop the stack it does not force a resize in the main content. Resizing it manually fixes it.

[AbanoubNassem]

@mariossavva, yup same issue here

[FilipMatys]

Experiencing the same issue with 3.7.1 in these two scenarios:

Screen orientation change

1. Push page to navigation stack
2. Change screen orientation
3. Pop page
4. All pages in the navigation stack now have content covered by header

Keyboard

1. Push page to navigation stack
2. Edit using platform keyboard
3. Pop page
4. All pages in the navigation stack now have content covered by header

[viktor-shmigol]

I have this same bug in ionic 3.7.1(Android/IOS)

[aduttonomni]

Same here. Android and iOS on 3.7.1

[genelim]

Experiencing the same thing.

To Reproduce:

1. Parent page with rootpage set.(ion-nav rootpage='RootPageName')
2. Rootpage is loaded
3. Nav.push('AnotherPage')
4. Click on input type number
5. Keyboard of numbers appear
6. Close keyboard
7. Setroot('ParentPage')
8. Content of rootpage of parent is pushed up behind parents navbar.

Downgrading it to 3.6 to fix the problem.

[mhartington]

Can someone please provide a sample project that has this issue? I have not been able to replicate this locally.

[kensodemann]

@mhartington - duplicated using instructions from OP:

Using the ionic-conference-app with version 3.7 or 3.7.1 of Ionic add a text input in session-detail.html.
Navigate to a session-detail through the schedule page.
Open and dismiss the keyboard with the text input added.
Go back to the schedule page.
You will now see some content is hidden behind the ion-header. If you change tabs it will restore.

This is on a Galaxy Note 4. Android 6.0.1

[kensodemann]

Also tried with latest nightly ([email protected]) and still can duplicate. Here is repo if it is helpful:

https://github.com/kensodemann/test-bed-conference

[rfoel]

This behavior happens when I pop the view using the Android back button only, works fine if I pop using the app back button. Can reproduce in >= 3.7.0.

[mhartington]

Perfect, I can replicate this. Thanks yall.

[mhartington]

Hey yall, I got a fix for this that I would like you to test out.

Please unzip this and place it in your node_modules, then deploy to your device.

We were originally calling content.resize() when ever the window would resized, which was causing the issue. Now we only call it on orientation change.

ionic-angular.zip

[genelim]

@mhartington Hi, I have tested it. It works!

To make it work

1. Replaced my ionic-angular with @mhartington 's ionic-angular.zip (as @mhartington mentioned)
2. run "ionic cordova run android --prod"
3. deployed to device
4. Ionic Info

cli packages:

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.1

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1-201710192121

System:

Node : v6.9.4
npm  : 4.3.0
OS   : Windows 10

Tested with :

1. this.nav.pop()
2. this.nav.setRoot('PageName")
3. input type="text"
4. input type="number"
5. ion-searchbar
6. Rotating orientation while doing 1 to 5
7. Tested on emulator

All the above works. Great work! 👍 🥇

By the way, what was the ionic-angular.zip version based on? was it 3.7.1?

[gammelby]

@mhartington I tried the patch on the scenario described in https://github.com/ionic-team/ionic/issues/13172 but the problem still persists in the Ionic super starter app: If I rotate an iOS device 90 degrees and back again and presses back, the topmost content on the previous page is still hidden by the navbar. Perhaps I prematurely closed that ticket if the problems are not as related as believed?

[Sampath-Lokuge]

Can you please see this issue too? @mhartington
https://github.com/ionic-team/ionic/issues/13194

[mhartington]

@gammelby I will look at it and try to recreate

[mhartington]

Can people try this? Same instructions as before, this should take care of the shifting content.

ionic-angular.zip

[kensodemann]

Works fine on my Galaxy Note 4 (Android 6.0.1) and fixes the issue.
On my iPhone 7 iOS 11.0.3 it just hangs on the splash screen (app does not hang on splash screen with 3.7.1)

I am going to try re-installing and re-verifying with your zip just to be sure.

[kensodemann]

UPDATE - must have been something wonky with my first install. After re-copy it works great on both platforms.

[gammelby]

@mhartington When I try the latest patch, I get a runtime error when rotating the iOS device: "null is not an object (evaluating this.getNav().isActive), stack: handleOrientationChange [native code]"

It happens on the super starter app whenever I rotate the device.

[ptitjes]

@mhartington I can confirm that your fixes on master (i.e. 3.7.1-201710201922) do fix the problem at least on android and browser builds. Thank you very much !

[plul]

Thanks for working on this. Please include this fix in 3.7.2 and release asap.

[genelim]

I can confirmed it worked flawlessly. Test are done the same as my previous post.

[charlierz]

Thank you very much on solving this issue.

[Simpler1]

@mhartington With your latest fixes, if the original page was using virtualScroll, after pushing, editing, and popping another page, the original list only shows a single list item in the middle of the page. It appears that the page height is not calculating correctly after popping the other page.

Edit: Your fix (3.7.1-201710202012) along with pull request #13143 fixes the problem for virtualScroll also.

[gammelby]

@mhartington With [email protected], I still see the same issue as described in https://github.com/ionic-team/ionic/issues/13172 with the default super starter app - but the null exception in the patch attached here has been fixed.

Edit: Reopening https://github.com/ionic-team/ionic/issues/13172 as this ticket is closed and probably not as related as I thought initially.

[kensodemann]

@polfernandez - I think you have that in the wrong issue. This issue had to do with the ion-content section being hidden behind the navbar when you would:

1. open a child
2. open the keyboard
3. close the keyboard
4. close the child

(see full description in OP)

This one did not have to do with the whole screen scrolling when the keyboard displays.

[huker]

Thank you on solving this issue，it works on 3.7.1-201710201922！

[edugolive]

+1, thanks, this work for me

[zaq962]

+1 I have this same bug in ionic 3.7.1 ios9.3 when i use cordova-plugin-ionic-webview

how can i resolve it

[malwatte]

Is this fixed in Ionic 1.3.5 ?

[SamiHK]

@saschwarz your solution works only if I change the orientaion. Without changing orientation contetn remains behind header.

[ionitron-bot[bot]]

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.