Правильный способ оптимизации анимации CSS 3 для iOS / Mobile Safari?

Я создаю приложение iPad с помощью PhoneGap. Я пытаюсь использовать преобразования CSS для анимации, но я не совсем уверен, что использую надлежащие методы для использования любого аппаратного ускорения, которое может поддерживать устройство.

Это модальное окно (DIV), которое я хочу сдвинуть с верхней части страницы. Он начнет располагаться в верхней части экрана, а затем анимируется на самой странице, добавив класс через jquery:

.modal { background: url('../images/bgnd-modal.png'); width: 800px; height: 568px; position: absolute; top: -618px; left: 100px; z-index: 1001; -webkit-transition: top .25s ease-in; } .modal.modalOn { top: 80px; } 

При развертывании на iPad 2 с iOS 4 это работает, но анимация слегка отрывистая. Это не совсем гладкая анимация. Должен ли я использовать разные CSS для этого? Или это, возможно, только побочный эффект от того, что это приложение PhoneGap и DIV, у которого есть большое фоновое изображение?

2 Solutions collect form web for “Правильный способ оптимизации анимации CSS 3 для iOS / Mobile Safari?”

Вы должны как минимум добавить пустое выражение translate3d:

 transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); 

Это значительно улучшит производительность iOS, как продемонстрировал Remy Sharp , поскольку он заставляет iOS использовать аппаратное ускорение.

Если вы хотите пойти дальше, рефакторируйте анимацию, чтобы использовать трансляцию трансляции webkit, вместо того, чтобы анимировать свойство «top». В свойстве transform3d второй параметр является значением Y. В вашем примере измените -webkit-transition чтобы сосредоточиться на свойстве transform, а не на верхнем. Затем установите начальное webkit-transform translate3d(0,0,0) .

Чтобы выполнить анимацию, измените объявление класса .modal.modalOn на:

 transform: translate3d(0,80px,0); -webkit-transform: translate3d(0,80px,0) 

Это заставит iOS анимировать преобразование элемента и должно быть даже более плавным, чем первый метод.

– Примечание. Не забудьте добавить единицу измерения, например px или em, что-то вроде transform: translate3d(0,80,0); не будет работать.

попробуйте добавить:

 webkit-backface-visibility: hidden; 
  • Как изменить цвет элемента HTML, когда пользователь нажимает на него?
  • Почему Apple относится к этим приложениям специально?
  • Включение рамки WebKit для iOS8 не позволяет выполнить проверку
  • Webkit переполнения прокрутки Touch ошибка CSS на iPad
  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • Как настроить пользовательские заголовки HTTP на запросы, сделанные WKWebView
  • iOS Safari RTL Offset с использованием -webkit-overflow-прокрутки: touch и -webkit-transform: translate3d (0,0,0)
  • видимые полосы прокрутки IOS с "webkit-overflow-scrolling: touch"
  • iOS Webkit не работает на устройстве, но работает на симуляторе при быстром
  • iOS5 -webkit-overflow-прокрутка вызывает остановку работы сенсорных событий
  • Safari: неправильный расчет видового экрана для размеров шрифта
  • PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.