1

I have a few panels that I slide horizontally using the animate function that jQuery so generously provides.

The problem is that 100% of the clients that will be using this small app I am making use IE6. I am worried that because the panels contain a few elements on them, not too many but not few it will be very slow on IE6 and the rather poor-ish PCs that will be seeing this.

Now the question, should I animate scrollLeft to scroll the parent div or should I reposition the child div animating css left attribute?

Is there any performance gain by chosing one over the other? (I cannot test on the target PCs at the time being to be able to make an empirical decision.)

Thank you.

Francisc
  • 77,430
  • 63
  • 180
  • 276
  • 1
    In general, the fewer elements you can animate the better performance will be. Choose the option that is the fastest empirically, if you can. Otherwise choose the option that animates the fewest elements. – Brian Donovan Jan 20 '11 at 17:06
  • Hi Brian. I can't test it on the relevant machines sadly. In both cases the same number of elements get moved, only one scrolls the parent's content while the other repositions the parent content. – Francisc Jan 20 '11 at 17:22

1 Answers1

3

From my experience, animating scrollLeft gives better performance because most browsers do not redraw the entire window when scrolling (otherwise scrolling down a page would be ridiculously laggy for the slower computers...), while animating the left css property would cause the browser to redraw.

Populus
  • 7,470
  • 3
  • 38
  • 54
  • It was just an observation I had a while ago, it is less noticeable now as our computers are faster (and browsers are more optimized now). One benchmark here (http://jsperf.com/translate3d-vs-xy/13) supports it, but the difference seem to negligible, and it's telling us to use translateX/Y. Another SO answer which provides some more insight into what redraws or reflows the browser: http://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint – Populus Sep 04 '13 at 14:55