javascript - Angular2-app visar inte laddningstext på mobilen

Jag har en angular2-app med TypeScript som använder SystemJS; jag använde följande startapp.

När du är på skrivbordet kan du se laddningstexten mellan taggarna (t.ex. Loading...).

På min indexsida har jag en liten div för laddning för att visa att mina appar är långsamma vid första inläsningen.

Men denna div visas aldrig på mobilen.

Indexkod

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

Låt mig veta om du behöver fler kodexempel.

Jag vill i princip att denna div inuti app-taggarna ska visas på mobilen; jag är också öppen för alla jQuery Mobile-trick.

Det verkar vara keyframe. Kan du låta mig veta vad som är fel?

CSS och keyframe-kod

 .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;
  }
}

Svar #1

Safari är kräsen när det gäller keyframe-animationer, om inget visas, försök ta bort klassen bounceInDown och försök sedan att lägga till animationsfunktionerna igen en i taget och se vad som slutar fungera.

REDIGERA: försök först att flytta bounceInDown-klassen i din css till före @-webkit-keyframes bounceInDown

Relaterade artiklar