Как сделать скроллинг и css-анимацию плавными?
Fiddle, о чём идёт речь – как сделать анимацию влево-вправо, которая реализована CSS3 transform, плавной?
Есть что-то похожее на большую таблицу, лишь часть которой видно через небольшое окно <div style="overflow:auto">.
«Таблица» сделана из div'ов колонок (position:absolute), внутри которых абсолютно спозиционированы по высоте отдельные ячейки — небольшие структуры из нескольких <div>.
Раньше число столбцов идеально вписывалось в ширину, и скроллинг был только вертикальный, родной браузерный. Теперь возникла необходимость неограниченно расширить число колонок.
Я хочу, чтобы:
1) вертикальный скроллинг был нативным браузерным (обычным);
2) горизонтальный – дискретным по столбцам, и желательно, без полосы прокрутки браузера, а js/кнопками. И хорошо бы с плавным CSS3 transition;
3) всё это не тормозило при большом числе невидимых деталей.
Сейчас проблема в том, что горизонтальный шаг, который я сделал назначением div'ам колонок свойства transform: translateX(-300), несмотря на transition: transform 1s, выглядит в FireFox очень скачкообразным. Видимо, сказывается большое число невидимых ячеек, для которых почему-то всё равно что-то просчитывается.
Upd. Тормоза в FireFox, а в Chrome всё прилично плавно.
В какую сторону копать? Ускорит ли CSS анимацию, если делать колонки, которые точно за кадром, display:none?
Upd. 2. Видео доклад с CSS conf US 2014 проливает свет на проблему. Paul Irish про параллакс эффект и скорость рендеринга в браузерах (на англ.)
Upd. 3. Исследования и рекомендации для плавных анимаций и прокрутки в браузерах: jankfree.org (на англ.)
Upd. 4. добавил fiddle. Разумеется, упрощённый. В настоящем и ячеек больше, и состоят они не из одного div'а, а чуть более сложные конструкции, все кликабельные.