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

UNCONFIRMED
Unassigned

Status

()

UNCONFIRMED
8 years ago
8 years ago

People

(Reporter: ben.gourley, Unassigned)

Tracking

Trunk
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

8 years ago
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
(Reporter)

Updated

8 years ago
Summary: Setting MozTransform property immediately followed by CSS properties to animate prevents animation application of new style → Setting MozTransform property with javascript, immediately followed by CSS properties to animate, prevents animation and application of new style
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
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.
(Reporter)

Comment 2

8 years ago
http://bengourley.info/stuff/cssjs.html

For me, as soon as this page loads the font is 50px.
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.  :(
Component: Layout → Style System (CSS)
QA Contact: layout → style-system
You need to log in before you can comment on or make changes to this bug.