Browser Chrome su iOS con ngRepeat overscrolls su ricarica

Question

Ho riscontrato un caso estremamente fastidioso con una piccola applicazione AngularJS di una pagina che ho sviluppato per un client.

Per semplicità, si consideri il seguente codice HTML:

<div ng-controller="ServiceGuideCtrl"> 
    <h1>Care Assessment</h1> 
    <form ng-submit="loadResults($event);"> 
     <div> 
      <h2>Is this for you or a loved one?</h2> 
      <ul> 
       <li><input type="radio" ng-model="who" value="Do you"> Me</li> 
       <li><input type="radio" ng-model="who" value="Does your loved one"> Loved one</li> 
      </ul> 
     </div> 
     <div ng-repeat="question in questions"> 
      <h2>{{ question.text }}</h2> 
      <ul> 
       <li><input type="radio"> Yes</li> 
       <li><input type="radio"> No</li> 
      </ul> 
     </div> 
     <p ng-show="who"><input type="submit" value="Submit answers"></p> 
    </form> 
</div> 

Il regolatore angolare:

app.controller('ServiceGuideCtrl', ['$scope', '$timeout', '$window', function($scope, $timeout, $window) { 

     $timeout(function() { 
      $window.scrollTo(0,0); 
     }); 

     $scope.$watch('who', function(value) { 
      $scope.questions = []; 
      if (typeof $scope.who !== 'undefined') { 
       for (var i=0; i < 20; i++) { 
        $scope.questions.push({ 
         'text': $scope.who + ' need this particular thing?' 
        }); 
       } 
      } 
     }); 
}]); 

Il problema è in ogni piattaforma iOS sul browser Chrome:

1. Select una delle opzioni "Me/Loved one"
2. Scroll verso il basso attraverso le domande (preferibilmente il basso), ma non fare clic su "Invia risposte"
3. ricaricare la pagina, mentre ancora in fase di scorrere verso il basso
4. pagina si "salta" per la posizione di scorrimento salvato, ma dal momento che gli elementi ng-repeat aren 'caricato, si overscroll in un'area completamente grigio scuro.
5. Cambiando l'orientamento o semplicemente scorrendo leggermente la pagina di backup, salta la pagina dove dovrebbe essere.

Ecco uno screenshot di quello che sembra:

Plunker: Click here

Se si vuole test this on Chrome using your own iOS device (dal Plunker utilizza iframe e fa accadere cose strane con lo scorrimento sul mobile dispositivi).

Come potete vedere, $window.scrollTo(0,0) non sta facendo nulla per me. Sembra che Chrome per iOS applichi la posizione di scorrimento salvata dopo aver caricato DOM e Angular. Se uso un timeout di circa 20-30 ms, la pagina sfarfalla sullo schermo e poi torna in alto, confermando la mia teoria. Il problema è che il valore di 20-30 ms è ancora inaffidabile (funziona la metà del tempo) e qualsiasi valore più grande causerebbe uno sfarfallio dello schermo molto più evidente.

Come posso fare in modo che quando una pagina con elementi di ripetizione ng viene ricaricata su iOS per Chrome, non sovrascriva l'area grigia vuota? Si tratta forse di un bug dal browser Chrome di iOS?

Va notato che lo accetterei come un bug del browser (leggi: non il mio problema), ma i membri del mio ufficio sono su una vendetta anti-AngularJS quindi mi piacerebbe sistemarlo.

Answer 1

Non possiedo un iPhone e capisco a malapena il problema, ma poiché sembra che gli smarphone applichino un evento di scorrimento indesiderato sull'intera pagina, vorrei aggirarlo impostando un'altezza fissa sul documento, e invece gestire lo scorrimento di overflow all'interno del contenitore.

html { height: 100%; } 
body { height: 100%; } 
.container { height: 100%; overflow: scroll; } 

http://plnkr.co/edit/gDQNIY6kFuLnskn85yXj?p=preview