angularjs trượt chuyển tiếp bị hỏng trên safari ios 9

Question

Tôi có các lớp css sau đây mà tôi sử dụng để trượt ng-view của tôi sang trái và phải khi bắt đầu thay đổi tuyến đường. Tất cả đều hoạt động khá tốt trên hầu hết các trình duyệt, điện thoại, ... Cho đến bây giờ ... Theo ios 9 hoạt ảnh không hoạt động, nó không còn trượt sang trái, nhưng chế độ xem tăng từ kích thước nhỏ đến kích thước đầy đủ trong khi trượt, hiệu quả là khá khó chịu. Bất kỳ trợ giúp sẽ được hoan nghênh!

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>

---

CẬP NHẬT

---

Tôi đã đến một câu trả lời một phần từ một câu hỏi tương tự và câu trả lời tiếp theo đăng bởi Diego vào ios 9 mobile safari has a blinking bug with transform scale3d and translate3d

Tôi đã thử một giải pháp tương tự như một gửi về câu hỏi này. I E. sử dụng overflow: hidden trên một phần tử cha mà dường như đã giải quyết được vấn đề hoạt hình. Tôi đang thử nghiệm trên giả lập và mọi thứ dường như kiểm tra. Tuy nhiên, điều này phá vỡ một số thứ khác, cụ thể là cuộn ....

Trích dẫn Diego "Có vẻ như là lỗi với thành phần lớp lồng nhau và định cỡ của chế độ xem. Thêm tràn: ẩn trong lớp cha dường như giải quyết Từ quan điểm về hiệu suất, mọi thứ có vẻ giống nhau (các bố cục giống hệt nhau, sơn, các lớp tổng hợp) "

Điều này đang đi đúng hướng, nhưng chưa phải là câu trả lời đúng.

Answer 1

Có một chủ đề về here

TLDR này: Bạn cần phải thiết lập các giá trị quy mô meta viewport để 1,0001

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

Thậm chí tốt hơn nếu bạn chỉ nhắm mục tiêu các thiết bị 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

Tôi thấy rằng translateX là lỗi trong iOS 9 vì một số lý do ... Khi tôi thay đổi các biến đổi từ translateX(<whatever>) thành translate3d(<whatever>, 0, 0) mọi thứ bắt đầu trở nên lành mạnh trở lại.

Hãy dùng thử.