缓慢的行为pushPage温泉UI

Question

我有页面之间的pushPage幻灯片动画（慢行为）的问题。

Cordova 4.3.0/OnsenUI 1.3.0/iOs 8.3。

也许fastClick不工作！？
任何人都可以帮助我找到这个错误？

代码：

的Index.html

<ons-sliding-menu 
     menu-page="pages/menu.html" main-page="pages/page1.html" side="left" 
     var="menu" type="reveal" max-slide-distance="65%" swipable="true"> 
    </ons-sliding-menu> 

page1.html

<ons-navigator var="appNavigator"> 

<ons-modal var="modal1" style="display:none;" id="modal1"> 
    <ons-icon size="20px" spin="true" icon="ion-load-c"></ons-icon> 
    <br><br> 
    Loading... 
</ons-modal> 


<ons-page ng-controller="controller1"> 

    <ons-pull-hook ng-action="load($done)" var="loader"> 
     <span ng-switch="loader.getCurrentState()"> 
      <span ng-switch-when="initial" style="opacity:0.7;font-size:12px;color:#e23b3c;"><ons-icon style="color:#e23b3c;" size="20px" icon="ion-arrow-down-a"></ons-icon> Baja para actualizar</span> 
      <span ng-switch-when="preaction" style="opacity:0.7;font-size:12px;color:#e23b3c;"><ons-icon style="color:#e23b3c;" size="20px" icon="ion-arrow-up-a"></ons-icon> Suelta para actualizar</span> 
      <span ng-switch-when="action" style="opacity:0.7;font-size:12px;color:#e23b3c;"><ons-icon style="color:#e23b3c;" size="20px" spin="true" icon="ion-load-c"></ons-icon> Loading...</span> 
     </span> 
    </ons-pull-hook> 

    <ons-toolbar style="background-color:#e23b3c;"> 
    <div class="left"> 
     <ons-toolbar-button ng-click="menu.toggle()"> 
     <ons-icon icon="ion-navicon" size="28px" fixed-width="false" style="color:#fff;"></ons-icon> 
     </ons-toolbar-button> 
    </div> 
    <div class="center" style="color:#fff;">TITLE...</div> 
    </ons-toolbar> 

     <section style="height:100%;"> 
      <ons-list id="lista_descuentos" style="width:100%;height:100%;"> 
       <ul> 
        <li ng-click="showDetail($index)" ng-repeat="data in todo.all" class="list__item list__item--tappable list__item__line-height list-item-container list__item--chevron"> 

         <div class="ribbon-wrapper-green"> 
         <div class="ribbon-green">{{data.data1}}%</div> 
         </div> 
         <div class="list-item-main"> 
          <div class="list-item-left" ng-if="data.data2 == 1"> 
           <img src="urlXXX/{{data.data3}}" class="thumbnail"/> 
          </div> 
          <div class="list-item-left" ng-if="data.data2 != 1"> 
           <img src="urlXXX/{{data.data3}}" class="thumbnail desaturate"/> 
          </div> 
         <div class="list-item-right"> 
          <div class="list-item-content"> 
          <span class="list-item-name">{{data.data4}}<br/> 
           <span class="lucent">{{data.data5}}</span> 
          </span> 
          <br/> 
          </div> 
         </div> 
         </div> 
         <span class="list-item-action"></span> 
        </li> 
       </ul> 
      </ons-list> 
     </section> 
    </ons-page> 

page2.html

<ons-page ng-controller="controller2"> 
    <ons-toolbar style="background-color:#e23b3c;"> 
     <div class="left" style="color:#fff;"><ons-back-button >Back</ons-back-button></div> 
     <div class="center" style="color:#fff;">{{data1}}</div> 
    </ons-toolbar> 

    <div style="height:100%;width:100%;background-position:center; background-repeat:no-repeat; background-size:cover;background-color: #333;background-size:cover;" class="desaturateDiv"> 
     <div class="dots"></div> 
     <div style="position:absolute;bottom:0;width:100%;height:100%;background-color:rgba(51, 51, 51, 0.6);z-index:90;"> 
     </div> 
     <div style="position:absolute;bottom:0;width:100%;height:30%;background-color:rgba(51, 51, 51, 0.7);z-index:91;color:#fff;"> 
      {{dato2}} 
     </div> 
    </div> 

app.js

module.controller('controller1', function($scope, $http, info) { 

       var firstTime = 1; 
       var getData = function ($done) { 
       if (firstTime==1){ 
        modal1.show(); 
       } 

       $http({method: 'GET', url: info.url}). 
       success(function(data, status, headers, config) { 
         if ($done) { $done(); } 
          $scope.todo = data; 
         if (firstTime==1){ 
          modal1.hide(); 
         } 
         }). 
       error(function(data, status, headers, config) { 

        if ($done) { $done(); } 
         alert('error'); 
         modal1.hide(); 
        }); 

       } 

       // Initial Data Loading 
       getData(); 

       $scope.load = function($done) { 
        firstTime = 0; 
        getData($done); 
       }; 



       $scope.showDetail = function(index) { 


       var selectedItem = $scope.todo.all[index]; 
       console.log('asd: '+selectedItem.data1); 

       $scope.appNavigator.pushPage('pages/page2.html',{data1:selectedItem.data1, data2:selectedItem.data2, data3:selectedItem.data3}); 

       } 



      }); 


module.controller('controller2', function($scope) { 

        $scope.data1 = appNavigator.getCurrentPage().options.data1; 
        $scope.data2 = appNavigator.getCurrentPage().options.data2; 
        $scope.data3 = appNavigator.getCurrentPage().options.data3; 

       }); 

Answer 1

我得到，如果元视口代码是否正确没有配置300ms的延迟。

用下面的视口设置双指缩放被禁用，所以应该没有延迟：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 

温泉UI将动态设置视口标签，如果是没有的定义。