问题
I have the following css classes that I use to slide my ng-view left and right at route change start. These all work quite well on most browsers, phones, etc. Until now... Under ios 9 the animation is not quite working, it no longer slides left to right, but the view grows from a small size to full size while sliding, the effect is rather unpleasant. Any help would be welcome!
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
I've arrived at a partial answer from a similar question and subsequent answer posted by Diego on ios 9 mobile safari has a blinking bug with transform scale3d and translate3d
I tried a similar solution as the one posted on this question. ie. using overflow:hidden on a parent element which seems to have solved the animation problem. I'm testing on the simulator and things seem to check out. However, this breaks a number of other things, namely scrolling....
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. From a performance point of view, everything seems to be behaving the same (identical layouts, paints, compositing layers)"
This is going in the right direction, but not yet a correct answer.
回答1:
There is a thread about this here
TLDR: You need to set meta viewport's scale values to 1.0001
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
Even better if you target only the IOS devices:
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.querySelector('meta[name=viewport]').setAttribute(
'content',
'initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no'
);
}
回答2:
I found that translateX is buggy in iOS 9 for some reason...
When I changed my transforms from translateX(<whatever>) to translate3d(<whatever>, 0, 0) things started to become sane again.
Try it.
来源：https://stackoverflow.com/questions/32804106/angularjs-slide-transition-broken-on-safari-ios-9