Recently, I've come across a peculiar issue in one of my web applications while using Angular's routeProvider as a template engine. The app functions properly, but the behavior seems inexplicable to me.
The problem arises during page transitions (particularly in Safari and mobile Safari) where the next page momentarily flickers at the front before transitioning smoothly. Surprisingly, adding a slash ("/") at the end of the href URL like href="#/home/" instead of href="#/home" resolves this issue. Can anyone shed light on why such a simple change fixes this unexpected behavior?
This is how I configured the routeProvider:
.config(function($routeProvider) {
$routeProvider.when('/home', {
controller: 'HomeCtrl',
templateUrl: './home.html'
}).when('/pageTwo', {
controller: 'twoCtrl',
templateUrl: './pageTwo.html'
}).otherwise({
redirectTo: '/home'
});
})
My HTML structure looks 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 here is the CSS styling I used:
.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;
}