Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a performance issue with using very large background-position offsets?

I'm building a progress bar control, and I'm working on the case where it doesn't actually show progress, but just spinning indicator of "something is happening". The design I have for it is basically alternating diagonal stripes, essentially a barber pole kinda like this, but "spinning":

A barber pole progress bar

With the hopes of offloading as much as I can to the rendering engine, I want to use CSS transitions for this. Supporting old browsers is not a concern for me.

So, my first idea was to basically do this:

.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;
}

... and then, when it gets rendered to the screen, use Javascript to essentially do this:

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

Are there any performance issues about:

  1. Transitioning for that long
  2. Having background-position: -1000000px 0 ?

Alternatively, do you have a better solution?

like image 236
nickf Avatar asked Jun 14 '11 13:06

nickf


1 Answers

I don't think there could be any performance issues. It's not because you use big numbers that they use more CPU or memory.

like image 122
user703016 Avatar answered Oct 30 '22 00:10

user703016