Re: Efficient Script Yielding - First Editors Draft

I was directly quoting an example from a talk given at TXJS a few weeks ago. 
I don't use CSS transitions, nor do I care about them. But the experts (the 
speaker in question is an Opera employee) in CSS animations and transitions 
who were talking said that's how you have to do it. I made the mental note 
that the future "script yielding" thing would be better than 
setTimeout(...,0);

--Kyle




--------------------------------------------------
From: "Boris Zbarsky" <bzbarsky@MIT.EDU>
Sent: Friday, July 01, 2011 9:45 AM
To: <public-web-perf@w3.org>
Subject: 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:52:32 UTC