Баг в Firefox (v18.0 , os x) c CSS-свойствами:
Некорректно работает transition когда:
- появляется правило у элемента, которое нельзя сделать переходным
- элемент имеет position:fixed..
Пример:
Есть группа элементов со свойством transition.
body, #a, #b, #x, #y {
-webkit-transition: all .1s;
-ms-transition: all .1s;
-o-transition: all .1s;
-moz-transition: all .1s;
transition: all .1s;
}
Некоторые из этих элементов имеют position: fixed (это одна из причин бага)!
Эти элементы, получают класс со свойствами, которые можно плавно изменить (margin, left).
Но одновременно с этим body получает свойство overflow c значением hidden (св-во может быть любое, главное - которое нельзя плавно изменить)
Результат: плавный переход не срабатывает в firefox
Решение проблемы:
1. Можно задать небольшой интервал для назначения неизменяемого св-ва для body:
window.setTimeout(function () {
document.body.style.overflow = "hidden";
}, 1);
2. Убрать у элементов, которые участвуют в плавном переходе, position: fixed
Суть бага мне еще до конца не ясна((
Демо бага
http://test.hnoe.ru/
В левой части браузера вкладка, во всех браузерах кроме firefox она анимированная