transizione diapositiva angularjs interrotta su safari ios 9

Question

Ho le seguenti classi css che uso per far scorrere la mia ng-view a sinistra ea destra all'avvio del cambio di rotta. Funzionano tutti abbastanza bene su molti browser, telefoni, ecc. Fino ad ora ... Sotto ios 9 l'animazione non è del tutto funzionante, non scorre più da sinistra a destra, ma la visualizzazione cresce da una dimensione ridotta a una dimensione intera durante lo scorrimento, l'effetto è piuttosto spiacevole. Qualsiasi aiuto sarebbe il benvenuto!

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

---

sono arrivato ad una risposta parziale da una domanda simile e la successiva risposta inviato da Diego il ios 9 mobile safari has a blinking bug with transform scale3d and translate3d

ho provato una soluzione simile a quella pubblicata su questo argomento. vale a dire. uso di overflow: nascosto su un elemento genitore che sembra aver risolto il problema dell'animazione. Sto testando il simulatore e le cose sembrano dare un'occhiata. Tuttavia, questo rompe un certo numero di altre cose, vale a dire lo scorrimento ....

Citando Diego "Sembra essere un bug con la composizione e il ridimensionamento del livello nidificato del viewport. Aggiunta di un overflow: nascosto in un livello genitore sembra risolvere il problema Dal punto di vista delle prestazioni, tutto sembra comportarsi allo stesso modo (layout, vernici, livelli di compositing identici) "

Questo sta andando nella giusta direzione, ma non è ancora una risposta corretta.

Answer 1

C'è un filo su questo here

TLDR: È necessario impostare valori di scala meta del viewport a 1,0001

<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/> 

Ancora meglio se si target solo i dispositivi 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' 
); 
} 

Answer 2

ho scoperto che è translateX buggy in iOS 9 per qualche motivo ... Quando ho cambiato i miei trasforma da translateX(<whatever>) a translate3d(<whatever>, 0, 0) cose hanno cominciato a diventare di nuovo sano di mente.

Provalo.