Last Comment Bug 649247 - Style resolution race conditions when triggering CSS transitions / animations
: Style resolution race conditions when triggering CSS transitions / animations
Status: NEW
:
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: Trunk
: All All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
https://people.mozilla.com/~fyan/test...
Depends on: 774655 1187571
Blocks: 701626
  Show dependency treegraph
 
Reported: 2011-04-11 23:38 PDT by Frank Yan (:fryn)
Modified: 2016-02-02 10:04 PST (History)
0 users
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Frank Yan (:fryn) 2011-04-11 23:38:06 PDT
I plan to discuss style resolution in relation to CSS transitions with David Baron soon, but Gavin wanted me to file a bug and reference it in the patch I'm about to land, so here it is.

A typical block of code that I write to skip the animation once is:
CSS:
#foo { width: 50px; -moz-transition: width 1s; }
JS:
var foo = document.getElementById('foo');
foo.style.MozTransition = 'none';
foo.style.width = '100px';
foo.clientTop; // force style resolution
foo.style.MozTransition = '';

Using element.clientTop in this way is rather common in our codebase:
https://mxr.mozilla.org/mozilla-central/search?string=.clientTop%3B

Gavin considers this to be a hack and would like some investigation and dicussion on why we need this or how to make it better.

Last week, I made a few testcases for this here:
http://frankyan.com/labs/racy.html
It is so named for the race conditions.
Whether or not the transitions occur seem to be unpredictable for the last two boxes on Linux.
Comment 1 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2011-04-15 14:34:09 PDT
So, a few thoughts here:

 * it would probably be good if we had common functions for flush_style, flush_frames(), flush_layout(), etc.  In this case we only need flush_style() (which you can do with something like getComputedStyle(document.documentElement, "").color -- at least so that we can spot intentional flushes easily, and perhaps work on figuring out how we can avoid them

 * a possible solution here would be an API like the one I proposed here:
http://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html though the only response so far: http://lists.w3.org/Archives/Public/www-style/2011Mar/0730.html is not exactly supportive.  With an API like this, if you're doing *all* your transitions from script, you could just use this API rather than using style-change-triggered transitions.
Comment 2 Boris Zbarsky [:bz] 2011-04-15 17:36:17 PDT
> * it would probably be good if we had common functions for flush_style,
> flush_frames(), flush_layout(), etc. 

Yes!  Can we put them somewhere where reftest can trigger them too?
Comment 3 Daniel Veditz [:dveditz] 2016-01-26 10:08:01 PST
Frank: What is the concern that caused you to mark this a security bug?
Comment 4 Frank Yan (:fryn) 2016-01-26 12:32:24 PST
Accidental. Feel free to unmark.

Note You need to log in before you can comment on or make changes to this bug.