Angular- why does / in href stop flickering?

Question

I'm encountering some strange behavior in one of my web apps when using Angular's routeProvider as a template engine. Although it works, it doesn't make sense to me why it works.

Whats happening is that during transitions from page to page (mostly in safari/mobile safari) you will see the page you're transitioning to flicker in the front of view before transitioning in. How I fixed this problem is just by adding a slash to the end of the href's url, ex:href="#/home/" instead of href="#/home . Does anyone out there know why adding a "/" to the url would fix such a problem?

I set up the routeProvider like this:

.config(function($routeProvider) {
    $routeProvider.when('/home', {
      controller : 'HomeCtrl',
      templateUrl : './home.html'
    }).when('/pageTwo', {
      controller : 'twoCtrl',
      templateUrl : './pageTwo.html'
    }).otherwise({
      redirectTo: '/home'
    });
  })

My html like this:

<ul id="nav">
    <li>
        <a href="#/home" class="bt-icon">HOME</a>
    </li>
    <li>
        <a href="#/pageTwo" class="bt-icon">TWO</a>
    </li>
</ul>

and css like this:

.view-animate-container {
    position:relative;
    width: 100%;
    height: 100%;
}
.view-animate {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

.view-animate.ng-enter {
    opacity:0;
    -webkit-transform: translate3d(20%,0,0);
    transform: translate3d(20%, 0, 0);
}
.view-animate.ng-enter.ng-enter-active {
    display: block;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0, 0, 0);
    opacity:1;
}
.view-animate.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-20%,0,0);
    transform: translate3d(-20%, 0, 0);
    opacity:0;
}

Answer 1

Is there a reason why you link to the hash instead of the route itself?

Have you tried changing your links to <a href="/home">Home</a> instead of href="#/home" ?

Angular will manage the hash for you, (or not, if your browser supports pushState).