Ionic iphone screen overlap on page navigation

I am facing one strange issue with my mobile app. I am using Ionic framework, with angular JS.

Issue:

When I navigate from Page1 -> Page2 , ionic do left to right push animation. Out of 6 from 10, animation moves in following way: Page1 -> Page2 -> Page1 -> Page2 or page1 and Page2 overlap on same screen.

Please check the screen shot attached :arrow_down:

Please help or tag people who can help.

@mhartington

I’m not familiar with the details, but you might have to use the statusbar plugin, that allows you to StatusBar.hide()

the problem is not with status bar. Problem is with navigation. Page1 overlapped over page2.

I’m having the exact same problem from time to time. I hope somebody has a good solution for this.

please help @Calendee @Ionic

Please tag more people who can help.

Just tagging random people is not very nice…

What exactly is happening? I don’t understand your description of the problem.
Does it jump between the pages?
Does it hang between them?

Also please provide more context:

  • Does this happen on iOS?
  • Only on real device?
  • Which devices?
  • Also on simulator?
  • Does it also happen on Android?
  • In the browser locally?

in my case:

  • In browser it goes well
  • iOS real device (iPhone 5S and iPhone 6)
    *happens when i go to a next screen and then go back with the back button of swipe to go back. Then the current screen that supposed to go away is overlapping the screen where i need to go to.

I believe this is the same as in this post

thank you for your reply, but i don’t see any solutions at the moment. Am i missing something?

@fabiankrieger it should be a bug that is not resolved now. also you can check this

Thank you for your reply!

And yeah i know, but in the meanwhile. Do we just build buggy apps or are there workarounds to get rid of these backnavigation issues?

Use nav-clear. I hope this will help.

1 Like

Thank you @SureshKoduri, we’ll try as soon as we get back developing this app again :smile:

I just sent a testflight of my app to my customer for testing and they all came back with the same issue, and shared the screen shot below.

Reading through this message, I have implemented the nav-clear in my buttons (all of which are tags that call a method on the state object in the controller $state.stateManager where I then do some processing (saving the data to local storage) and then use a $state.go() transition. I have not been able to replicate the problem since applying the nav-clear attribute, but then I was not seeing it on my app while running in XCode so I am not sure if this is a fix.

Looking over this thread and others on Stackoverflow it seems to be related to just iOS. I am running iOS 9.1 (13B143) and ionic 1.1.0 with the iOS9 patch and radiobutton patch.

I am going to resend this to my customer and see if they can replicate the issue and will update here accordingly. If anyone else finds a definitive answer, please let me know!

1 Like

Let me know what your client says, i hope it worked for you!

got same issue… i hope replay someone soon…with better solution

Hello Suresh,

Are you sure its working . Because in my case its not working. Do you have any other solution to this issue . With ionic2beta11 i have used it in below way:

<ion-header>
<ion-navbar nav-clear  class="header">
 <ion-title>Hello World</ion-title>
</ion-navbar>
</ion-header>

Guys , please check with loader controller ,
i got same issue with loader controller ,
after removing it its working fine

I am also facing same issue on ios devices , please help what to do . its very critical issue on IOS devices .