Angular2 application that does not show downloading text on mobile

Question

I have an angular2 application with typescript that uses SystemJS; I used the following initial application .

When on the desktop you can see the loading text between the tags (for example, Loading... ).

On my index page, I have a small loading div to show that my applications load slowly the first time.

But this div never displayed on mobile devices.

Zip 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 sample code.

Basically I want this div inside app tags to appear on mobile devices; I am open to any jQuery mobile tricks.

This seems to be a keyframe . Could you tell me what happened?

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 about keyframe animations, if they don’t show anything, try removing the bounceInDown class, and then try re-adding the animation features one at a time and see what happens.

EDIT: first try moving the bounceInDown class to your css to @ -webkit-keyframes bounceInDown