Как сделать плавные переходы css3 по высоте (и другим параметрам) на iPhone?

Question

Я пытаюсь создать простую слайд-панель, которая скользит внизу экрана и закрывает область просмотра. Затем я загружаю контент в эту панель через AJAX.

Я устанавливаю элемент панели на высоту: 0 и абсолютно позиционирую его в нижней части области просмотра, а с примененными переходами css3, я устанавливаю высоту на высоту области просмотра, таким образом, вызывая анимацию. *

К сожалению, анимация очень медленная и запаздывает до такой степени, что она совершенно неприемлема.

Я применяю следующий CSS для панели:

-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-property: height;

Количество контента, похоже, влияет. А может это тип контента? Я не уверен. Я не думаю, что AJAX вызывает проблемы, хотя я могу ошибаться.

Есть идеи?

Приветствие.

Answer 1

Вялость, безусловно, связана с тем, что браузер должен перевернуть текст, чтобы приспособиться к новой высоте. Попробуйте анимировать положение или перевести, а не высоту.

Вот быстрый прототип: http://jsfiddle.net/6gdGr/

Вы можете столкнуться с проблемой мерцающего слайда, вы легко найдете ответ в stackoverflow, который включает в себя либо: 1. скрытие видимости задней стороны, либо 2. использование -webkit-translate3d в зависимости от контекста.