Style resolution race conditions when triggering CSS transitions / animations

NEW
Unassigned

Status

()

Core
CSS Parsing and Computation
6 years ago
a year ago

People

(Reporter: fryn, Unassigned)

Tracking

(Depends on: 2 bugs)

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

6 years ago
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.
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.
> * 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?
(Reporter)

Updated

5 years ago
(Reporter)

Updated

4 years ago
Summary: Investigate / discuss style resolution in relation to CSS transitions → Style resolution race conditions when triggering CSS transitions / animations
(Reporter)

Updated

4 years ago
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INCOMPLETE
Status: RESOLVED → REOPENED
Depends on: 774655
Resolution: INCOMPLETE → ---
(Reporter)

Updated

3 years ago
Status: REOPENED → NEW

Updated

2 years ago
Blocks: 701626

Updated

2 years ago
Depends on: 1187571
(Reporter)

Updated

a year ago
Group: core-security
Frank: What is the concern that caused you to mark this a security bug?
Flags: needinfo?(fryn)
(Reporter)

Comment 4

a year ago
Accidental. Feel free to unmark.
Flags: needinfo?(fryn)
Group: core-security → layout-core-security
Group: layout-core-security
You need to log in before you can comment on or make changes to this bug.