I got into an incredibly annoying case with the small one-page AngularJS application that I developed for the client.
For simplicity, consider the following HTML code:
<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>
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') { for (var i=0; i < 20; i++) { $scope.questions.push({ 'text': $scope.who + ' need this particular thing?' }); } } }); }]);
The problem is with any iOS platform in the Chrome browser:
- Select one of the "Me / Loved one" options.
- Scroll through the list of questions (preferably from the bottom), but do not click "Send answers"
- Reload the page while it scrolls.
- The page will “skip” to the saved scroll position, but since the
ng-repeat elements do not load, it skips to a completely dark gray area. - Changing the orientation or just a small page scroll backwards drags the page to where it should be.
Here is a screenshot of what it looks like:
Plunker: Click here
If you want to test this in Chrome on your own iOS device (since Plunker uses iFrames and does weird things with scrolling on the device’s mobile devices).
As you can see, $window.scrollTo(0,0) does nothing for me. It seems that Chrome for iOS applies the saved scroll position after loading the DOM and Angular. If I use a timeout of about 20-30 ms, the page flickers off-screen and then returns to the top, confirming my theory. The problem is that a value of 20-30 ms is still unreliable (it works half the time), and any larger values can cause a much more obvious screen flicker.
How can I make it so that when a page with ng-repeat elements reloads in iOS for Chrome, it does not overflow to an empty gray area? Is this a potential bug from the iOS Chrome browser?
It should be noted that I would accept this as a browser error (read: not my problem), but my office members are on anti-AngularJS vendetta, so I would like to fix it.
angularjs google-chrome ios
sjagr
source share