10

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-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


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

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.

2 Answers 2

11
+50

There is a thread about this here

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"/>

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

I found that translateX is buggy in iOS 9 for some reason... When I changed my transforms from translateX(<whatever>) to translate3d(<whatever>, 0, 0) things started to become sane again.

Try it.

3
  • I was using translateX. I changed to translate3d. Same result in iOS 9.
    – nuttzman
    Sep 29, 2015 at 14:45
  • I thought you nailed it, I tried it but no luck. translate3d still behaves the same as translateX Sep 30, 2015 at 0:41
  • Oh, well... worth a shot :)
    – giladgo
    Sep 30, 2015 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.