iPhone .scrollTo() not rendering screen properly

Question

I have created an angularJS and Phonegap app with a fixed navbar and footer which sit outside the ui-view. Like such.

<div class="topcoat-navigation-bar">
  // Contents of navigation bar
</div>
<div class="main" ui-view="main"></div>
<div class="topcoat-button-bar button-bar-footer">
  // Contents of footer 
</div>

Templates are loaded into the ui-view depending on the state. In the device template I have this div which has a big list of devices. This list is scrollable.

<div class="device-container" scrollRecord scrollTo>
   //list of devices
</div>

Here is the css for this container

.device-container {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0px, 0px, 0px);
  clear: both;
}

What I wanted is while scrolling down the list the app stores the location of the scroll. When you close the app and open it again it opens to the same scroll position. So I made these directives to record the scroll position and then match the position when the screen is loaded again.

    .directive('scrollRecord', function () {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {

                    angular.element(element).bind("scroll", function () {
                        var element_top = $(element).scrollTop();
                        localStorage.setItem('devicesScrollPosition', JSON.stringify(element_top));

                    });


                }
            };
        })  
  .directive('scrollTo', function ($anchorScroll, $timeout, $location) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var scrollPost = JSON.parse(localStorage.getItem('devicesScrollPosition'));
                    $timeout(function () {
                        $(element).scrollTop(scrollPost);               
                    });
                }

            };
        })

This is working 100% on Android however on iPhone the screen scrolls to the position but doesn't draw the contents until you touch the screen. I have tried numerous fixes ranging from using $(window) to record to trying to trigger a touch event and even adding div s and removing them on load of the screen.

Answer 1

Use window.scrollTo(0.0); immediately when the screen is loaded.