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

Ответ 1

Вы должны как минимум добавить пустое выражение 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); не будет работать.

Ответ 2

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

webkit-backface-visibility: hidden;