Screen overlap during transition on iPad

We are getting overlapping screen during navigation / transition on iPad Air (please review attached video taken in slo-mo - ). During the transition, the new screen starts loading and before it completes transition, we see a section of previous screen for a brief period. Also, it is more visible in landscape resolution when screen width is more. We tried on different versions of iOS including latest 8.3. We are running Cordova 4.3 and Ionic RC4.

Forcefully setting transition to android resolves the issue.

I have the same problem with the iPad. I hope there is a fix for this.
For now I disabled transitions for iPad:

if( ionic.Platform.isIPad() ) {

We have the same thing on one of our apps. Has anyone found another solution for this? Haven’t tried the actual 1.0.0 release yet, have you? @niekweevers @iondev @mhartington

o.O , haven’t seen this before.

Are you seeing this in the standard tabs example?
Or any example that uses animations

We have same issue. Issue mainly with IPad application when used it in vertical mode. (Not reproduce in simulator). When transition from one screen to other there is some black screen and some portion of older screen display for brief amount of time until next page fully load.

At present issue seems resolved by following CSS. I searched it someware from this forum. But it is good if address in IONIC itself.

[nav-view-transition][nav-view-direction] {
  background-color: transparent; }

[nav-view-transition="ios"] [nav-view] {
  box-shadow: none !important; }

@mhartington haven’t tried with tab but it happens with app having slide menu and screen transition with default iOS transition / animation.

Didn’t try this with the tab variant. And also didn’t try it yet with v 1.0.0.

Same issue here on an iPad in landscape mode, but not in portrait mode.

Ionic CLI 1.4.5
Cordova 5.0.0
Ionic 1.0.0

Kamleshkoringa’s solution seems to improve the transition a lot :

  background-color: transparent; }

[nav-view-transition="ios"] [nav-view] {
  box-shadow: none !important; }

Now there’s another issue left :
When selecting an item for the first time the animation is correct for both views, but when you return and click for a second time on the same item ( the animation is correct when you would select another item) the parent view that should animate to the left is removed immediately without animation. ( as an example I added a video where I’ve set the background from the ion-nav-view to black again )

So there is something wrong with the nav-view-direction attribute on the ion-view element.

Experiencing the same issue and the following did improve the transition in my case

[nav-view-transition][nav-view-direction] {
  background-color: transparent; }

Hi Everyone,

Any updated on above issue, since I am having this issue frequently but not continuously.

1 Like