Ionic 2 RC2 Page show breaks on slow devices

[ataraxus]

Short description of the problem:

If ionic 2 is executed on slower devices it occures randomly that the page transition halts and the user sees a white screen. The user is able to swipe the menu or use the hardware back button

Steps to reproduce:
Its only occurs on slower devices like a Galaxy Tab A or Samsung s5 mini. I check with a rather old device (dual core) where this issue occurs nearly every time. It seems to some sort of race condition.

This is the page if pagetransition halts

<glossary class="ion-page" style="z-index: 100; transition-delay: initial; transition-property: none;"><ion-header class="header-md">
    <fw-navbar><ion-navbar class="cem-style-toolbar toolbar toolbar-md toolbar-md-rewered" color="rewered"><div class="toolbar-background toolbar-background-md"></div><button class="back-button disable-hover bar-button bar-button-md back-button-md bar-button-default bar-button-default-md" ion-button="bar-button"><span class="button-inner"><span class="button-inner"><ion-icon class="back-button-icon icon-md back-button-icon-md ion-md-arrow-back" role="img" aria-label="arrow back"></ion-icon><span class="back-button-text back-button-text-md"></span></span></span><div class="button-effect"></div></button><button ion-button="" menutoggle="" class="disable-hover bar-buttons-md bar-button bar-button-md bar-button-menutoggle bar-button-menutoggle-md bar-button-default bar-button-default-md" hidden=""><span class="button-inner">
    <ion-icon name="menu" role="img" class="icon-md ion-md-menu" aria-label="menu">
    </ion-icon>
  </span><div class="button-effect"></div></button><ion-buttons end="" class="bar-buttons-md">
    <button class="badge disable-hover bar-button bar-button-md bar-button-default bar-button-default-md" ion-button=""><span class="button-inner">
      <span class="counter" style="transform: scale(1, 1); display: block;" hidden="">
        0
      </span>
    </span><div class="button-effect"></div></button>
  </ion-buttons><div class="toolbar-content toolbar-content-md">
  
  <ion-title class="fix-ios-beta11 title-md"><div class="toolbar-title toolbar-title-md"><img alt="REWE" class="logo" src="assets/images/logo.svg"></div></ion-title>
  
</div></ion-navbar>
</fw-navbar>
</ion-header>

<ion-content padding="" class="content-md"><div class="fixed-content"></div><div class="scroll-content">
  <div class="stage">
    <img alt="Stage - Welcome" class="bg" src="assets/images/glossar/[email protected]">
    <img alt="Placeholder" class="visual" src="assets/images/glossar/[email protected]">
  </div>

  <p class="leadin">
  </p>


</div></ion-content>
</glossary>

this is the page if page transition proceeds

<glossary class="ion-page show-page" style="z-index: 102; transition-delay: initial; transition-property: none;"><ion-header class="header-md">
    <fw-navbar><ion-navbar class="cem-style-toolbar toolbar toolbar-md toolbar-md-rewered" color="rewered"><div class="toolbar-background toolbar-background-md"></div><button class="back-button disable-hover bar-button bar-button-md back-button-md bar-button-default bar-button-default-md show-back-button" ion-button="bar-button"><span class="button-inner"><span class="button-inner"><ion-icon class="back-button-icon icon-md back-button-icon-md ion-md-arrow-back" role="img" aria-label="arrow back"></ion-icon><span class="back-button-text back-button-text-md"></span></span></span><div class="button-effect"></div></button><button ion-button="" menutoggle="" class="disable-hover bar-buttons-md bar-button bar-button-md bar-button-menutoggle bar-button-menutoggle-md bar-button-default bar-button-default-md" hidden=""><span class="button-inner">
    <ion-icon name="menu" role="img" class="icon-md ion-md-menu" aria-label="menu">
    </ion-icon>
  </span><div class="button-effect"></div></button><ion-buttons end="" class="bar-buttons-md">
    <button class="badge disable-hover bar-button bar-button-md bar-button-default bar-button-default-md" ion-button=""><span class="button-inner">
      <span class="counter" style="transform: scale(1, 1); display: block;" hidden="">
        0
      </span>
    </span><div class="button-effect"></div></button>
  </ion-buttons><div class="toolbar-content toolbar-content-md">
  
  <ion-title class="fix-ios-beta11 title-md"><div class="toolbar-title toolbar-title-md"><img alt="REWE" class="logo" src="assets/images/logo.svg"></div></ion-title>
  
</div></ion-navbar>
</fw-navbar>
</ion-header>

<ion-content padding="" class="content-md"><div class="fixed-content" style="margin-top: 46px;"></div><div class="scroll-content" style="margin-top: 46px;">
  <div class="stage">
    <img alt="Stage - Welcome" class="bg" src="assets/images/glossar/[email protected]">
    <img alt="Placeholder" class="visual" src="assets/images/glossar/[email protected]">
  </div>

  <p class="leadin">
  </p>


</div></ion-content>
</glossary>

this is the corresponding component:

import { Component, ChangeDetectorRef, ViewChild, ElementRef, Renderer } from '@angular/core';
import { NavController, AlertController, LoadingController } from 'ionic-angular';
import { DefaultApi } from '../../api/api';
import { ApplicationService } from '../../services/app_service';
import {  Glossary, GlossaryEntry } from '../../model/models';


@Component({
  selector: 'glossary',
  templateUrl: 'glossary.html'
})
export class GlossaryPage {
  @ViewChild('letterBar') letterBar: ElementRef;
  public glossaries: Array<Glossary> = [];
  public loadedLetter: Array<GlossaryEntry>;

  constructor(private navCtrl: NavController,
    private api: DefaultApi,
    private as: ApplicationService,
    private alertCtrl: AlertController,
    private ref: ChangeDetectorRef,
    private rd: Renderer,
    private loadingCtrl: LoadingController) {
  }  
}

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
There is no error thrown in the console. the page is put on the nav stack but lacks the show-page class. if this class is added via inspector it appears as expected except the nav back button is missing.

Which Ionic Version? 1.x or 2.x
ionic 2 rc.2

Plunker that shows an example of your issue

It does not occur in browsers or on "fast" devices like a nexus 5x but only on "slow" devices like Galaxy Tab A.

Android Version on which it occurs:
4.4
5.0.2

also i'm using CrossWalk (cordova-plugin-crosswalk-webview) version:

2.1.0

Run ionic info from terminal/cmd prompt: (paste output below)

--------------------------------

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39
OS: Windows 7 SP1
Node Version: v6.9.1


--------------------------------

[infinnie]

Duplicate of #8769?

[infinnie]

Should be closed by #8769