Angular2应用程序未在移动设备上显示加载文本

Question

我有一个angular2应用程序,其中包含使用SystemJS的打字稿; 我使用了以下种子应用程序.

在桌面上,您可以看到标签之间的加载文本(例如Loading...).

在我的索引页面上,我有一个小的加载div来显示我的应用程序在首次加载时速度很慢.

但这div并没有在移动设备上显示出来.

索引代码

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

如果您需要更多代码示例,请与我们联系.

我基本上希望这些标签div内部app能够在移动设备上显示; 我也对任何jQuery移动技巧持开放态度.

它似乎是keyframe.你能让我知道什么是错的吗？

CSS和关键帧代码

 .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 对关键帧动画很挑剔，如果没有显示任何内容，请尝试删除ounceInDown 类，然后尝试一一重新添加动画功能，看看会出现什么问题。

编辑：首先尝试将CS​​S中的bounceInDown类移动到@-webkit-keyframesounceInDown之前