Правильный способ оптимизации анимации 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; 
  • com.apple.WebKit.WebContent drop 113 error: Не удалось найти указанную службу
  • Включить кеш приложений в WKWebView
  • Улучшение скорости CSS3 на iPad
  • iOS 10 Webkit Воспроизведение нескольких видеороликов Inline
  • WKWebView не перенаправляет контент при загрузке другого URL-адреса
  • WKWebView заставляет мой контроллер просмотра протекать
  • Не удалось выполнить команду com.apple.WebKit.WebContent
  • iOS Отказано в подключении, поскольку оно не указано ни в директиве connect-src, ни в директиве default-src политики безопасности контента
  • Исправленные элементы не доступны для кликов, когда я быстро прокручиваю нижнюю часть в iOS Safari 9+
  • WKWebView + contentInset делает неправильный размер контента
  • Почему Apple относится к этим приложениям специально?
  • Давайте будем гением компьютера.