angularjs幻灯片过渡在Safari IOS破9 [英] angularjs slide transition broken on safari ios 9
问题描述
我有使用滑动我的NG-视图以下CSS类左右的路由变化的开始。这些都在大多数浏览器，手机等工作得很好直到现在...在IOS 9动画是不太工作，它不再幻灯片左到右，但鉴于从一个小规模的增长到全尺寸，同时滑动，效果是相当不愉快。任何帮助将受到欢迎！
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进入，
.slide-left.ng-离开，
.slide-right.ng进入，
.slide-right.ng休假{
位置：绝对的;
顶部：58px;右：0;底部：0;左：0;
背景：继承;
-ms过渡：0.35S缓解-IN-OUT;
-webkit-过渡：0.35S易于在出;
-moz-过渡：0.35S缓解-IN-OUT;
-o过渡：0.35S缓解-IN-OUT;
过渡：0.35S缓解-IN-OUT;
}
.slide-left.ng进入{
的z-index：101;
-webkit-变换：translateX（100％）;
-ms变换：translateX（100％）;
-moz-变换：translateX（100％）;
-o-变换：translateX（100％）;
变换：translateX（100％）;
}
.slide-left.ng-enter.ng进入活跃{
-webkit-变换：translateX（0）;
-moz-变换：translateX（0）;
-o-变换：translateX（0）;
-ms变换：translateX（0）;
变换：translateX（0）;
}
.slide-left.ng休假{
的z-index：100;
-webkit-变换：translateX（0）;
-moz-变换：translateX（0）;
-o-变换：translateX（0）;
-ms变换：translateX（0）;
变换：translateX（0）;
}
.slide-left.ng-leave.ng休假活跃{
-webkit-变换：translateX（-100％）;
-moz-变换：translateX（-100％）;
-o-变换：translateX（-100％）;
-ms变换：translateX（-100％）;
变换：translateX（-100％）;
}
.slide-right.ng进入{
的z-index：100;
-webkit-变换：translateX（-100％）;
-moz-变换：translateX（-100％）;
-o-变换：translateX（-100％）;
-ms变换：translateX（-100％）;
变换：translateX（-100％）;
}
.slide-right.ng-enter.ng进入活跃{
-webkit-变换：translateX（0）;
-moz-变换：translateX（0）;
-o-变换：translateX（0）;
-ms变换：translateX（0）;
变换：translateX（0）;
}
.slide-right.ng休假{
的z-index：101;
-webkit-变换：translateX（0）;
-moz-变换：translateX（0）;
-o-变换：translateX（0）;
-ms变换：translateX（0）;
变换：translateX（0）;
}
.slide-right.ng-leave.ng休假活跃{
-webkit-变换：translateX（100％）;
-moz-变换：translateX（100％）;
-o-变换：translateX（100％）;
-ms变换：translateX（100％）;
变换：translateX（100％）;
}
JS
$ rootScope。在$（'$ routeChangeStart'，功能）{
//事件按钮向后移动
$ rootScope.back =功能（）{
$ rootScope.slideClass ='滑权;
};
//事件按钮项目列表前进
$ rootScope.next =功能（）{
$ rootScope.slideClass ='滑左;
};
$ rootScope.stay =功能（）{
$ rootScope.slideClass ='滑无;
};
}）;
MARKUP
＆LT; DIV数据-NG-CLASS =slideClass自动滚动=真正的数据-NG-视图＆gt;＆LT; / DIV＆GT;
更新
我已经到达了部分答案来自一个类似的问题和答案随后发表迭戈<一个href=\"http://stackoverflow.com/questions/32639639/ios-9-mobile-safari-has-a-blinking-bug-with-transform-scale3d-and-translate3d\">ios 9移动Safari浏览器与转换scale3d闪烁的错误和translate3d
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
我尝试过类似的解决方案，一张贴在这一问题。 IE浏览器。使用溢出：隐藏这似乎已经解决了这个问题，动画父元素上。我测试在模拟器上，事情似乎退房。然而，这打破了一些其他的事情，即滚动....
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.
推荐答案
有一个关于这个线程这里
TLDR：你需要元视口的比例值设定为1.0001
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"/>
更妙的是，如果你的目标只是IOS设备：
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'
);
}
这篇关于angularjs幻灯片过渡在Safari IOS破9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
