Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-variables] Define handling for 'display' to avoid infinite cycles #501

Closed
birtles opened this issue Sep 20, 2016 · 1 comment
Closed
Labels
css-variables-1 Current Work

Comments

@birtles
Copy link
Contributor

birtles commented Sep 20, 2016

We define special tainting behavior to avoid cycles with animation properties but we have a similar issue for the 'display' property.

:root {
  --foo: block
}
div {
  display: var(--foo);
  animation: change-foo 100s;
}
@keyframes change-foo {
  to, from { --foo: none; }
}

In this case, we start off with a <div> with display: block, run the animation which sets --foo to none so the <div> ends up with display: none. As a result we cancel the animation in <div>. Since we cancelled the animation, --foo goes back to block, and hence the animation restarts. And so on.

(For what it's worth, this is the reason why display is considered non-animatable for at least CSS animations and CSS transitions. As a result, the corresponding spec text might not necessarily need to refer to display specifically but rather all non-animatable properties.)

@tabatkins
Copy link
Member

Done. In 3ff5229 I elaborated a bit and only invalidate the var() if it would result in the element losing its box.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-variables-1 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants