Есть ли проблема с производительностью при использовании очень больших смещений фоновой позиции?

Я создаю индикатор выполнения, и я работаю над случаем, когда он на самом деле не показывает прогресс, а просто вращается индикатор "что-то происходит" . Дизайн, который у меня есть для него, в основном состоит из чередующихся диагональных полос, по сути, как парикмахерская, вроде этого, но "крутится":

A barber pole progress bar

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

Итак, моя первая идея заключалась в том, чтобы в основном сделать это:

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

... а затем, когда он отобразится на экране, использовать Javascript, чтобы сделать это :

myBarberPole.style.backgroundPosition = '-1000000px 0';

Есть ли проблемы с производительностью:

  1. Переход на такой долгий срок
  2. Имея background-position: -1000000px 0 ?

Как вариант, есть ли у вас лучшее решение?

7
задан nickf 14 June 2011 в 14:13
поделиться