916620 - CSS transitions on new elements added with javascript are erratic

Status: RESOLVED DUPLICATE of bug 701626

(Core :: CSS Parsing and Computation, defect)

Description

[Andrew Brehaut]

Attachment: transitionend.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130814063812

Steps to reproduce:

Create a style rule with a CSS transition. Add an element that matches that rule to the dom, and immediately set a style property to trigger the transition. (see attached test case)


Actual results:

Transition erratically triggers; sometimes the element just appears in the final state immediately, and no transitionend event is fired.  

It appears to be a race condition between the DOM and CSS engine and the JS view of the DOM; adding a small (15-30ms) setTimeout before setting the style property allows the two to become consistent. However, the required size of this timeout appears to depend on the size or complexity of the document in question (and presumably the machine performance and load).


Expected results:

element should appear in the document and immediately transition, followed by a transitionend event being fired.

Comment 1

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

This is basically expected behavior; it's a flaw in the design of transitions themselves.

See http://dev.w3.org/csswg/css-transitions/#starting

(That said, I really need to get around to bug 774655...)

Comment 2

[Boris Zbarsky [:bzbarsky]]

The behavior per spec is that transitions start when computed style changes.  The spec also says:

  Since this specification does not define when a style change event occurs, and thus what
  changes to computed values are considered simultaneous, authors should be aware that
  changing any of the transition properties a small amount of time after making a change 
  that might transition can result in behavior that varies between implementations, since
  the changes might be considered simultaneous in some implementations but not others. 

If you want to ensure that changing the specified value will happen after the value has been initially computed, you need to wait for style to be computed before you modify it (via requestAnimationFrame), or force its computation (by asking for the computed value).