аппаратное ускорение iOS ускользнуть вниз

Question

Сегодня у вас, ребята, хороший вопрос. Я работаю над выпадающим слайдером для мобильных устройств (в частности, для мобильных устройств на iOS). Я довольно далеко с этим, но ударил кирпичную стену. Проблема, с которой я столкнулся, заключается в том, что переходы (высота / позиция / поле) не очень плавные на мобильном устройстве. Поэтому я переключился на использование трансформаций, так как они очень гладкие на мобильном телефоне.

Я использую контейнер с дочерней статьей. Статья переведена на 120% по оси Y, поэтому она скрыта переполнением контейнеров. При нажатии статья возвращается в исходное положение.

Это прекрасно работает, кроме одной вещи, контейнер не разрушается, когда статья преобразуется на -120%, вызывая пробел между ползунками: (

Тогда у меня вопрос, как мне обойти это?

Надеюсь, вы, ребята, можете помочь!

Answer 1

Используйте translate3d для запуска аппаратного ускорения:

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

Это хорошо известный прием, заставляющий устройства iOS использовать аппаратно-ускоренные преобразования CSS3. Я обновил вашу скрипку для вас (примечание: я связался с событием 'hover' для тестирования браузера на рабочем столе).

http://jsfiddle.net/CeyJq/4/