angularjs - Chrome browser on iOS with ngRepeat overscrolls on reload -
i've hit incredibly annoying edge case small one-page angularjs app i've been developing client.
for simplicity, consider following html code:
<div ng-controller="serviceguidectrl"> <h1>care assessment</h1> <form ng-submit="loadresults($event);"> <div> <h2>is or 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 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> the angular controller:
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') { (var i=0; < 20; i++) { $scope.questions.push({ 'text': $scope.who + ' need particular thing?' }); } } }); }]); the problem in ios platform on chrome browser:
- select 1 of "me/loved one" options
- scroll down through questions (preferably bottom), don't click "submit answers"
- reload page while still being scrolled down
- page "jump" saved scroll position, since
ng-repeatelements aren't loaded, overscrolls dark grey area. - changing orientation or scrolling page jumps page it's supposed be.
here's screenshot of looks like:
plunker: click here
if want test on chrome using own ios device (since plunker uses iframes , makes weird things happen scrolling on mobile devices).
as can see, $window.scrollto(0,0) doing nothing me. seems chrome ios applies saved scroll position after dom , angular loaded. if use timeout of around 20-30 ms, page flickers off-screen top, confirming theory. problem 20-30 ms value still unreliable (it works half of time), , bigger values cause more obvious screen flicker.
how can make when page ng-repeat elements reloaded on ios chrome, doesn't overscroll blank grey area? potentially bug ios chrome browser?
it should noted accept browser bug (read: not problem), members of office on anti-angularjs vendetta i'd fix it.
i don't own iphone , hardly understand problem, since seems smarphones applies undesired scroll event on whole page, work around setting fixed height document, , instead handling overflow scroll within container.
html { height: 100%; } body { height: 100%; } .container { height: 100%; overflow: scroll; }