Angular2 app not showing loading text on mobile

Question

I have an angular2 app with typescript that uses SystemJS; I used the following seed app.

When on desktop, you can see the loading text in between the tags (e.g. Loading...).

On my index page, I have a small loading div to show my apps being slow on first-time load.

But this div doesn't ever show on mobile.

Index Code

<app>
    <header>
        <nav>
            <div class="container col-sm-10 col-sm-offset-1">                 
                  <div class="navbar-header">      
                    <a class="navbar-brand col-xs-3 col-xs-offset-1">
                      <img src="./assets/logo.png" />
                    </a>
                  </div> 
            </div> 
         </nav>
    </header>

    <div class="bounceInDown animated">  
        <div class="loading-wrapper animated fadeIn">      
            <p class="loading-text">Hold on!<br />We're unpacking...</p>
            <div class="loading-icon preload"></div>
        </div>
    </div>
</app>

Let me know if you need any more code examples.

I basically want this div inside the app tags to show on mobile; I'm open to any jQuery mobile tricks, too.

It seems to be the keyframe. Can you let me know whats wrong?

CSS and keyframe Code

 .loading-icon {
        animation: scaleout 1.0s infinite ease-in-out;
        background-color: #ffffff;
        border-radius: 100%;
        display: inline-block;
        height: 40px;
        margin: 100px auto;
        -webkit-animation: scaleout 1.0s infinite ease-in-out;
        width: 40px;
    }
} 

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

Answer 1

Safari is picky on keyframe animations, if nothing is showing try removing the bounceInDown class and then try to re-add the animation features one by one and see what breaks.

EDIT: first try to move the bounceInDown -class in your css to before the @-webkit-keyframes bounceInDown