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

try <app><div style="height: 100px; width:100px; background-color:red;"></div></app> ... I suspect loading of animation is taking time — anshuVersatile
– anshuVersatile, Commented Dec 10, 2016 at 18:35
its only css animation. it works fine on desktop but on mobile you cant see it — AngularM
– AngularM, Commented Dec 10, 2016 at 18:58
Yeh thats because your looking at desktop? it works fine on desktop — AngularM
– AngularM, Commented Dec 10, 2016 at 19:12

Johan Blomgren · Accepted Answer · 2016-12-10 20:17:44Z

3

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

edited Dec 10, 2016 at 20:17

answered Dec 10, 2016 at 20:03

Johan Blomgren

6184 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

AngularM Over a year ago

I've added my keyframe code above. it seems to be my key frame causing trouble.

Johan Blomgren Over a year ago

that css works in safari on mac and iphone. is it just the dot that is not showing for you on mobile? I cant see the "unpacking.." text even, and that has a different keyframe animation

AngularM Over a year ago

On my iphone in safari I just get white screen. but when i take keyframe out it works fine. seems to be something wrong with my keyframe code above?

Johan Blomgren Over a year ago

in @keyframes scaleout {} you don't need the webkit stuff, you have that in @-webkit-keyframes scaleout should not matter, but safari is picky

AngularM Over a year ago

I've narrowed it down and on a safari iphone i just keep getting a white background on load rather than the loading text. Does angular2 work different on mobile when loading?

|

Collectives™ on Stack Overflow

Angular2 app not showing loading text on mobile

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related