Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view grows from a small size to full size while sliding, creating an unpleasant effect. Any assistance would be appreciated!
CSS
.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
position: absolute;
top: 58px; right: 0; bottom: 0; left: 0;
background: inherit;
-ms-transition: 0.35s ease-in-out;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
}
.slide-left.ng-enter {
z-index: 101;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave {
z-index: 100;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter {
z-index: 100;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave {
z-index: 101;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}JS
$rootScope.$on('$routeChangeStart', function() {
//event button to move backward
$rootScope.back = function() {
$rootScope.slideClass = 'slide-right';
};
//event button item list to move forward
$rootScope.next = function() {
$rootScope.slideClass = 'slide-left';
};
$rootScope.stay = function() {
$rootScope.slideClass = 'slide-none';
};
});MARKUP
<div data-ng-class="slideClass" autoscroll="true" data-ng-view></div>UPDATE
Addressing a similar issue posted by Diego on ios 9 mobile safari has a blinking bug with transform scale3d and translate3d, I have found a partial solution. By applying overflow: hidden on a parent element, the animation problem seems to be resolved. However, this workaround breaks scrolling functionality. Quoting Diego, "It seems to be a bug with nested layer composition and sizing of the viewport. Adding overflow: hidden in a parent layer seems to solve the problem." While this is a step in the right direction, it is not yet a complete solution.