Плавающий родитель вызывает заикание / отставание производительности jquery в Firefox 8

Question

Извините, если это известная ошибка, но я пытаюсь это выяснить уже несколько часов (поиски в Google и мое собственное тестирование).

• У меня есть родительский контейнер, который плавает прямо.

• Родительский контейнер состоит из 10 элементов div, каждый из которых содержит h3 и другой элемент div. При нажатии запускается событие animate () и отображается div. В основном настройки стиля аккордеон.

• Я сузил заикание / отставание производительности до float: right Атрибут css в родительском контейнере.

• Удаление этого приводит к тому, что события становятся плавными, как они должны.

• Но это нарушает мой макет. Я также протестировал его в Safari 5.0, ie8 и chrome, и все события плавные, когда включен float: right. Firefox - моя единственная проблема. Кроме того, использование slideToggle () дало мне те же самые запаздывающие результаты. Это известная проблема с firefox / jquery и float? Я использую текущую библиотеку jquery.

Answer 1

Прежде всего, прочитайте эту статью с помощью гугл переводчика http://chikuyonok.ru/2010/11/optimization-story/

Решение:

1. Перед анимацией вам необходимо преобразовать (временно) ваш стиль с плавающей точкой в ​​положение: абсолютное без плавающего. Может быть, вам нужно вычислить будущие размеры div (высота / ширина) и использовать их в анимации. Возможно, вам нужно установить фиксированную высоту для родительского элемента перед анимацией.

2. Анимированный абсолютно позиционированный div

3. После анимации конвертировать позицию: абсолютный стиль обратно в float: right

Будет лучше, если в начальной и конечной точке статическая позиция не будет иметь атрибута style (все в классах css). В этом случае для восстановления стандартного стиля вам просто нужно .removeAttr ('style')