Ionic iphone screen overlap on page navigation

ionic-v1
1

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:

image
IMG_4316.JPG1242×2208 339 KB

1 Like
2

Please help or tag people who can help.

@mhartington

3

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

4

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

5

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

6

please help @Calendee @Ionic

Please tag more people who can help.

7

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?
8

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.
9

I believe this is the same as in this post

10

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

1 Like
11

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

12

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?

13

Use nav-clear. I hope this will help.

1 Like
14

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

15

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.

image
IMG_0685.PNG640×1136 227 KB

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
16

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

17

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

18

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>
19

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

20

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