Are DOM style calls limited by frequency?

Question

I'm trying to resize an html element (flash object) but it doesn't seem to respond more than once per second?

Is this a limitation imposed by browsers (both IE7 and FF3 do this)? Or should I be attempting to resize in a different/more efficient way?

function setHeightNow(height) { 

    if (document.getElementById) { 
     if (height > 0) { 
      var scaleItem = document.getElementById('application'); 
      scaleItem.style.height = height + 'px'; 
           }
    } 
   } 

Answer 1

If you are calling this function in a loop, as bobince mentioned in his/her comment, you should change it to a series of setTimeout calls (or setInterval) to give control back to the browser.

Something like this-

var i = INITIAL_VALUE;

(function() {
    setHeightNow(foo);
    if (i < FINAL_VALUE) {
        i++;
        setTimeout(arguments.callee, 0); //you can play around with the timeout.
    }
})();

Also

1. The documents.getElementById check is kind of useless because all browsers support it.
2. It would be wise to somehow take the document.getElementById call outside this repeating function if possible.

Answer 2

It's certainly not a defined limitation; we run an animation loop that is triggered 30 times/sec. (Using a 33ms timeout.) Mostly we move backgrounds around (animations) or adjust opacity (fade in/out) but sometimes we also re-size elements.

However, all of those elements are absolutely positioned, or in a fixed container, so it doesn't trigger a re-layout by the browser. I suspect your problem is simply the cost of performing that re-layout, most of which would be down to the flash object itself.