angularjs幻灯片过渡在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; D​​IV数据-NG-CLASS =slideClass自动滚动=真正的数据-NG-视图＆gt;＆LT; / DIV＆GT;

更新

我已经到达了部分答案来自一个类似的问题和答案随后发表迭戈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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！