Re: Efficient Script Yielding - First Editors Draft

On 7/1/11 8:49 AM, Kyle Simpson wrote:
> Unfortunately, this doesn't work because the style changes are batched
> together by the browser, so it goes right to blue, no transition. The
> only known workaround is:
>
> elem.style.backgroundColor = "red";
> setTimeout(function(){ elem.style.backgroundColor = "blue"; },0);

There is no guarantee that those won't get batched together, actually. 
And in fact, if I load this testcase in Gecko:

<!DOCTYPE html>
<span id="s">Some text</span>
<script>
   setTimeout(function() {
     var s = document.getElementById("s");
     s.style.color = "red";
     setTimeout(function() {
       s.style.color = "blue";
       s.style.MozTransition = "1s ease-in color";
     }, 0);
   }, 2000);
</script>

then the transition happens from default color (black in my case) to 
blue.  Which is not surprising: the style change to "red" is processed 
off a 15ms timer started when the style is set, so if your inner 
setTimeout runs faster than that the changes will get coalesced.  So 
something like setImmediate would be a _terrible_ solution here.

I have to ask: did you test the script you were suggesting in your mail?

A workaround that should work in all browsers is to make sure that the 
first style change has been processed by requesting style information 
after making the style change....

An even more correct solution for this particular use case is to use an 
animation; this is really an abuse of transitions.

-Boris

Received on Friday, 1 July 2011 14:45:42 UTC