Правильный способ оптимизации анимации 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, у которого есть большое фоновое изображение?

Вы должны как минимум добавить пустое выражение 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; 
  • WebKit бросает исключение на iOS 8 для вызова setBeingRemoved:
  • Какие действия запускают функцию webViewWebContentProcessDidTerminate
  • iOS 9 `-webkit-overflow-scrolling: touch` и` overflow: scroll` перерывы прокрутки
  • Доступ к истории просмотров iphone с помощью частной структуры webkit
  • Как узнать, воспроизводит ли WKWebView аудио?
  • Тупик с GCD и webView
  • Каковы последствия использования неподдерживаемого свойства WebKit?
  • WKWebView заставляет мой контроллер просмотра протекать
  • WKWebView + contentInset делает неправильный размер контента
  • Как включить локальное хранилище в моем приложении на основе WebKit?
  • Удалить 3 пикселя в текстовом поле iOS / WebKit
  • Давайте будем гением компьютера.