Better/Faster scrolling in mobile safari?

Question

I have a project with angularjs and bootstrap where I'm trying to replicate iOS's navigationController.

The problem is speed. It seems like one of the biggest issues is scrolling up/down when doing the transition between views. It just doesn't feel right.

My question is: how can I improve the speed of scrolling up/down and left/right in mobile safari iOS? I know it's doable (ionic is one good example, but we can't use them since they are mobile only).

This is my current code:

  /* View animations */
  .view-animate-container {
    position: relative;
    width: 100%;
  }

  .view-animate {
    -webkit-backface-visibility: hidden;
  }

  .view-animate.ng-leave {
    z-index: 1054;
  }
  .view-animate.ng-enter {
    z-index: 1053;
  }

  .view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;

    position: absolute;
    width: 100%;
    display: block;
  }

  .rtl .view-animate.ng-enter {
    -webkit-transform: translate3d(100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .rtl .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .rtl .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  .ltr .view-animate.ng-enter {
    -webkit-transform: translate3d(-100%, 0, 0);
    -webkit-transition-delay: 0.1s;
    opacity: 0;
  }
  .ltr .view-animate.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .ltr .view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  /* End of View animations */



  <div class='view-animate-container' ng-class='direction'>
    <div id='mApp' ng-view class='view-animate' autoscroll='false'></div>
  </div>



  // Random scrollHeight fix. Moves the scroll position up during the transition.
  function scrollToTop() {
    var ua = $('html')[0].className;
    var diff = document.body.scrollHeight;
    var delay = ((ua.indexOf('ua-mobile') > -1 && ua.indexOf('ua-webkit') > -1) ? (320 + diff/17) : 50);
    window.setTimeout(function() {
      window.scrollTo(0, 0);
    }, delay)
  }

Answer 1

I would try two things:

1. On the overflowed div (that is the div that you have set the overflow property), setting the overflow property to 'scroll', rather then using 'auto'.
2. Then, use $scope.$evalAsync which will be executed right after the digest has been finished (but before the actual rendering).

If it still doesn't work, you can combine the $evalAsync and setTimeout (or $timeout) - setting the timeout inside the $evalAsync.