701626 - CSS3 transition fails to animate from a setTimeout 0

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Rob]

Attachment: transition.html

User Agent: Mozilla/5.0 (Ubuntu; X11; Linux x86_64; rv:10.0a1) Gecko/20111108 Firefox/10.0a1
Build ID: 20111108034009

Steps to reproduce:

I created an element with a -moz-transition specified, added it to the document, and one setTimeout 0 later changed the background which should have triggered the transition.

Live version: http://middlerob.com/dump/transition.html
tested on v10.0a1 (2011-11-08) on Linux Mint (Ubuntu), confirmed on Aurora 9.0a2 (2011-11-08) on Mac


Actual results:

The transition never ran, the background color was immediately the end color.


Expected results:

The transition should have ran and the color should have faded from white to grey.

Comment 1

[Tim (fmdeveloper)]

Confirmed on Mozilla/5.0 (Windows NT 5.1; rv:11.0a1) Gecko/20111111 Firefox/11.0a1 ID:20111111031514

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

If you want to transitions start, you need to ensure the old data have been computed, for example using getComputedStyle.  Transitions aren't really designed for this use case; I agree it would be nice to have a programmatic way of starting a transition.

Comment 3

[Rob]

The real issue is if I cannot rely on a setTimeout 0 being enough time then I have no way of knowing when the time is right to change the property unless I guess.

The fact that this works fine in other browsers leads me to believe that this is the correct behaviour.  I checked some more browsers and it does in fact fade in in IE10, Opera, Safari and Chrome.  Firefox is the odd man out.

With more and more single page Javascript heavy web-apps being made I believe this is a realistic use case for transitions.

Comment 4

[Tim Taubert [:ttaubert] (inactive)]

Should we really just resolve this invalid? I just hit the same problem and setTimeout(0) works sometimes, but most of the times it doesn't. It seems there is no best practice to start transitions manually for newly created elements. Some sources use window.getComputedStyle() and some use setTimeout(0). requestAnimationFrame() should probably work, too.

IMHO it would be good to be on a par with Webkit and Opera here as using setTimeout(0) works reliably for them.

Comment 5

[Nickolay_Ponomarev]

There's a twin bug for this issue in the chrome code (bug 649247).

I agree we should at least document the solution we think is correct.