CSS3 Animation. Почему если позишн абсолют лагает анимация?

Question

[Максим Гречушников]

странное дело. сделал анимаци выпадающего меню
код примерно такой

nav.main ul li a
nav.main ul li ul li a

второй ul при наведении на первый li плавно раскрывается кодом

@keyframes dropmenu {
  0% {height:0;}
  100% {height:100%;}
}
@-moz-keyframes dropmenu{
  0% {height:0;}
  100% {height:100%;}
}
@-webkit-keyframes dropmenu{
  0% {height:0;}
  100% {height:100%;}
}
...
          -webkit-animation: dropmenu 1s 1;
          -moz-animation: dropmenu 1s 1;
          -ms-animation: dropmenu 1s 1;
          -o-animation: dropmenu 1s 1;
          animation: dropmenu 1s 1;

но так повелось, что заказчику стукнула еще анимация, для которой потребовалось nav.main сделать Position:absolute; и после такой правки анимация меню в фф происходит так: в течении секунды открывается 1 строка меню, затем все остальное без анимации. в хроме еще хуже. отображается только половина строки и потом сразу все меню. если position absolute убрать то все ок....

не знаю куда копать. на браузеры грешу

Answer 1

[ModestesGonze]

Попробуй включить аппаратное ускорение

.dropmenu {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    transform: translatez(0);
}

habrahabr.ru/post/202358
habrahabr.ru/company/yandex/blog/239169

Comments

[Максим Гречушников]

отрабатывает быстрее, плавнее. но после 2 строки меню все равно пачкой вываливается

[ModestesGonze]

выложи на jsfiddle.net

[Максим Гречушников]

@ModestesGonze jsfiddle.net/8Le31cvq/2

[Максим Гречушников]

@ModestesGonze добрый знакомый помог. % запенил на PX и норм стало

[ModestesGonze]

Только хотел предложить такой вариант), но он плох тем что если клиент добавит еще пункты, то проблема вернется. А суть проблемы в высоте, почитай как работает свойство height с процентами и поймешь.

[ModestesGonze]

Тут нужно либо менять сам эффект анимации, например чтоб блок выезжал, либо через jquery определять высоту вложенного ul, и подставлять это значение при ховере, но это тоже плохой вариант. И кстати, зачем ты используешь animation, если можно обойтись простым transition, кода меньше а эффект будет тот же.

[Максим Гречушников]

@ModestesGonze я больше бэк программист, и уже года два не верстал. это все что я смог родить из анимаций.

[Максим Гречушников]

временно верстальщика нет. найти себе не могу. вот пришлось самому выкручиваться

[Максим Гречушников]

@Aingis на данный момент все заработало. Спасибо. Но трогать больше не буду. Вопрос с фикс высотой решу когда время его придет. Либо это решит более профильный работник

Answer 2

[Максим Гречушников]

Интересная библа ricostacruz.com/jquery.transit