трансформация: масштабирование очень медленно во всех версиях Firefox

Question

Пожалуйста, проверьте это:

http://users.telenet.be/prullen/grid.html

У него нормальная скорость в сафари, но эффект масштабирования в Firefox очень медленный.

Интересно, если я добавлю:

.item {
      width:100px;
      height:100px;
}

кажется, что он немного ускорился (все еще не полностью свободно). Но это не тот размер, на котором мои изображения, поэтому он выглядит испорченным:

http://users.telenet.be/prullen/grid2.html

Если я установлю ширину / высоту элемента в соответствии с размером моих изображений, все снова замедлится:

.item {
      width:160px;
      height:160px;
}

http://users.telenet.be/prullen/grid3.html

Есть какие-нибудь идеи, что является причиной этого? У меня нет идей, я удалил / добавил заявления, но, похоже, ничего не помогло. Это проверено в различных версиях Firefox до версии 10.

Спасибо, Уэсли

Answer 1

Чтобы увеличить вашу анимацию, вы можете удалить свойство box-shadow из #container .item .thumbnail, это свойство тяжелое и замедляет вашу анимацию.
Но если вам все еще нужен эффект тени, вы можете попробовать оставить его какфон, а не как часть анимации.

Это должно занять некоторое изменение, но удаление свойства box-shadow из анимированного div сделает его быстрее.Div "item zoom" - это тот, кто отвечает за анимацию.Разделив класс «zoom» от класса «item» и применив правильные свойства css к каждому, анимация будет работать быстрее.(Я пробовал это с firebug)

HTML:

<div class="item">
  <div class="zoom">
    <div class="thumbnail">
        <img src="...">
    </div>
  </div>
</div>

Answer 2

Расположите свои элементы абсолютно так, чтобы они не были частью нормального потока документа.Это сделает так, чтобы браузер не пытался перерисовывать страницу каждый раз, когда воспроизводится анимация.

Когда элементы располагаются относительно друг друга, они могут влиять друг на друга, когда один из них изменяется, поэтому все они должныперерисовать, чтобы убедиться, что изменение одного элемента не затронуло их всех.

Я создал демо и абсолютно позиционировал элементы, вы можете видеть, что анимации гораздо эффективнее.

Вот демо: http://jsfiddle.net/QLTbU/