Сдвиг слайдов angularjs на сафари ios 9

У меня есть следующие классы css, которые я использую для перемещения моего ng-view влево и вправо при начале изменения маршрута. Все они хорошо работают на большинстве браузеров, телефонов и т.д. До сих пор... Под 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>


ОБНОВЛЕНИЕ


Я пришел к частичному ответу из аналогичного вопроса и последующему ответу, опубликованному Diego on iOS 9 для мобильного сафари имеет мигающую ошибку с преобразованием scale3d и translate3d

Я попробовал аналогичное решение, подобное тому, которое было опубликовано по этому вопросу. то есть. использование переполнения: скрыто на родительском элементе, который, похоже, решил проблему анимации. Я тестирую симулятор, и все, кажется, проверяется. Однако это нарушает ряд других вещей, а именно прокрутку....

Quoting Diego "Кажется, это ошибка с вложенным составом слоев и размером окна просмотра. Добавление переполнения: скрытое в родительском слое, похоже, решает проблему. С точки зрения производительности все, кажется, ведет себя одинаково (идентичные макеты, краски, слои композиции)

Это происходит в правильном направлении, но еще не правильный ответ.

Ответ 1

В этой теме есть .

TL;DR: вам нужно установить значения масштаба метаданных в 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'
  );
}

Ответ 2

Я обнаружил, что translateX по какой-то причине ошибочно работает в iOS 9... Когда я изменил свои преобразования от translateX(<whatever>) до translate3d(<whatever>, 0, 0), все стало снова нормальным.

Попробуйте.