Аппаратное ускорение переходов css3 для ios

Question

Я не думаю, что мой translate3d форсирует аппаратное ускорение (позиционирования сверху / снизу).Чего мне не хватает?

.image {
        background:yellow;
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;
        -webkit-transition-property: -webkit-transform, top, bottom;
        -webkit-transition-duration: 0.5s;
        -webkit-transform: translate3d(0,0,0);
    }

Answer 1

Я создал класс, который добавил ко всем элементам, запускающим прерывистую анимацию.На iPad 2 анимация не была прерывистой, но на iPad Retina возникали проблемы с производительностью.

.gpu-rendered {
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

Answer 2

Итак, анимация перехода медленнее / чоппер, чем вы хотели бы?По названию класса image я предполагаю, что проблема может заключаться просто в том, что это изображение, даже с включенным аппаратным ускорением;моя команда на работе иногда боролась с этим, выполняя симуляции / демонстрации пользовательского интерфейса на iOS.В качестве теста вы можете попробовать заменить изображение идентичным размером div и посмотреть, будет ли оно более плавным.