angularjs Safari 上的幻灯片过渡中断 ios 9

Question

我有以下 css 类用于在路线更改开始时左右滑动我的 ng-view。这些在大多数浏览器、手机等上都运行良好。直到现在...在 ios 9 下动画效果不佳，它不再从左向右滑动，但视图从小尺寸增长到全尺寸size 同时滑动，效果比较不爽。欢迎任何帮助！

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

标记

<div data-ng-class="slideClass" autoscroll="true" data-ng-view></div>

更新

我从 Diego 在

上发布的类似问题和后续答案中得出了部分答案

我尝试了与发布在这个问题上的解决方案类似的解决方案。 IE。在父元素上使用 overflow:hidden 似乎已经解决了动画问题。我正在模拟器上进行测试，一切似乎都已通过。但是，这会破坏其他一些东西，即滚动....

引用 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)"

这是朝着正确的方向前进，但还不是正确的答案。

Answer 1

出于某种原因，我发现 translateX 在 iOS 9 中存在错误... 当我将转换从 translateX(<whatever>) 更改为 translate3d(<whatever>, 0, 0) 时，事情又开始变得理智了。

试试吧。

Answer 2

有一个关于这个的帖子here

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

angularjs Safari 上的幻灯片过渡中断 ios 9

angularjs slide transition broken on safari ios 9

css

mobile-safari

ios

angularjs

ios9