New issue
Advanced search Search tips

Issue 884197 link

Starred by 1 user
Status: Available
Owner: ----
Cc:
smcgruer@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Feature

Blocking:
issue 883721



Sign in to add a comment

Avoid visual asynchronicity when animating CSS custom properties for Off-Thread PaintWorklet

Project Member Reported by smcgruer@chromium.org, Sep 14 
When we are deciding whether or not to push a CSS custom property animation to the compositor, we should try to avoid asynchronous visuals from doing so. For example;

.foo {
  border-color: var(--foo);
  background: paint(my-function);  // Where my-function has --foo as an input
}

The naive approach would be to say that a CSS custom property is only animatable on the compositor if it is not used as a variable to any style property. However that may be overzealous.

Comment 1 by flackr@chromium.org, Sep 14 

In particular, we can still composite the animation as long as the variable is not used in any of the computed styles of the particular element to be animated.

Though the naive approach may work in most cases, i.e. it's probably common to have variables that are specifically for paint worklet and not used for other properties.

Comment 2 by smcgruer@chromium.org, Sep 14 

I'm concerned that you might still cause visual asynchronicity if you allow different elements. Imagine something like two elements stacked on-top of each other where you want one to be a simple 'background-color: var(--foo)', and the other has 'background-image: paint(my-function)'. You may then want to animate --foo in a way that they change smoothly together (maybe you're using the CSS paint API for a special gradient on the lower element).

The answer might be 'you should use one element and paint() the whole thing', but I remain concerned :)
►

Sign in to add a comment