angularjs幻灯片过渡在safari ios 9上打破

Question

我有以下css类,用于在路线更改开始时左右滑动我的视图.这些都适用于大多数浏览器,手机等.到目前为止...在ios 9下,动画效果不佳,不再从左向右滑动,但视图在滑动时从小尺寸增大到全尺寸效果相当不愉快.欢迎任何帮助!

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

---

我从类似的问题得到了部分答案,迭戈在ios 9手机游戏中发布的后续答案有一个闪烁的错误,变换scale3d和translate3d

我尝试了与此问题上发布的解决方案类似的解决方案.即.使用overflow:隐藏在父元素上,似乎解决了动画问题.我正在模拟器上进行测试,事情似乎已经结束了.然而,这打破了许多其他的东西,即滚动....

引用迭戈"这似乎是嵌套层组合和视口大小的错误.添加溢出:隐藏在父层中似乎解决了问题.从性能的角度来看,一切似乎表现相同(相同的布局) ,油漆,合成层)"

这是正确的方向,但还不是正确的答案.

Answer 1

这里有一个关于此的话题

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'
  );
}