angularjs幻灯片过渡破坏在safari ios 9
我有以下的CSS类，我用来滑动我的ng-view在路由更改开始左和右。 这些都在大多数浏览器，手机等相当好的工作，直到现在…在ios 9下animation不工作，它不再滑动从左到右，但视图从小尺寸滑动到全尺寸，效果相当不愉快。 任何帮助将受到欢迎！
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
我已经从一个类似的问题得到了部分答案，Diego发布的ios 9移动版Safari浏览器随后的答案有一个闪烁的bug，其中scale3d和translate3d
我尝试了一个类似的解决scheme，如发布在这个问题上。 即。 使用overflow：隐藏在似乎解决了animation问题的父元素上。 我在模拟器上testing，似乎检查出来的东西。 然而，这打破了一些其他的东西，即滚动….
引用迭戈“这似乎是一个嵌套的图层组成和大小的视口的bug。添加溢出：隐藏在父层似乎解决了这个问题。从性能的angular度来看，一切似乎是相同的行为（相同的布局，油漆，合成层）“
这是正确的方向，但还不是一个正确的答案。
这里有一个关于这个的线程
TLDR：您需要将元视口的比例值设置为1.0001
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
如果只针对IOS设备，则更好：
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' ); }
我发现，由于某种原因， translateX在iOS 9中是有问题的…当我将转换从translateX(<whatever>)更改为translate3d(<whatever>, 0, 0)事情又开始变得理智了。
尝试一下。