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

Question

Я создаю приложение для 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 имеют большое фоновое изображение?

Answer 1

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

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

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

Если вы хотите пойти дальше, реорганизуйте анимацию, чтобы использовать преобразование перевода веб-набора, а не анимировать свойство top.В свойстве transform3d вторым параметром является значение Y.В вашем примере измените -webkit-transition, чтобы сосредоточиться на свойстве transform, а не на top.Затем установите начальное значение 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); не будет работать.

Answer 2

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

webkit-backface-visibility: hidden;