604074 - Setting MozTransform property with javascript, immediately followed by CSS properties to animate, prevents animation and application of new style

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect)

Description

[Ben]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b6) Gecko/20100101 Firefox/4.0b6

Here is an example:

document.getElementById('myElement').style["MozTransition"] = "all linear 1s";
document.getElementById('myElement').style["fontSize"] = "10px";

This results in the font size remaining at it's current value.

However:

document.getElementById('myElement').style["MozTransition"] = "all linear 1s";
setTimeout(function() { document.getElementById('myElement').style["fontSize"] = "10px"; }, 1000);

works as expected. (After 1 second the element size is animated to 10px).


I have tried various permutations of 'MozTransform' / '-moz-transform' with the same results. It appears there is some delay between setting the property and it having an effect.

Reproducible: Always

Steps to Reproduce:
See details
Actual Results:  
See details

Expected Results:  
See details

Comment 1

[Boris Zbarsky [:bzbarsky]]

Can you please attach or link to a page showing the problem?  The code in "here is an example" should certainly end up with the element in question having a 10px font size.

Comment 2

[Ben]

http://bengourley.info/stuff/cssjs.html

For me, as soon as this page loads the font is 50px.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Sure.  That behavior is just an inherent problem, or rather an inherent design decision, with transitions.  In particular, transitions trigger on computed style changes, with the idea that they're supposed to transition between two user-visible states but in this case the very first time we end up computing style for the paragraph is after the script has run, and in particular the state when the font-size is not 50px is never visible to the user before the script runs.

You'd get the same behavior in Webkit if the <p> were script-inserted instead of parser-inserted (they compute style eagerly for parser-inserted nodes and lazily for script-inserted ones, whereas we compute style lazily for parser-inserted nodes as well).

This is really an issue to raise with the CSS working group, but the short of it is that this usecase is not something that CSS Transitions are designed for.

Now in your particular case there's a simple workaround: force computation of style for the <p> (e.g. by asking for its computed font-size) at the beginning of that script....  It's ugly to have to do that, though.  :(