transition to var-depending calc() translation fails

Issue #16320322


Ana T.
Mar 10, 2018
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

Consider a link with a pseudo-element:

<a href='#'>BOO</a>
a:after {
  display: inline-block;
  content: '>>>'

On hover/ focus, we translate the pseudo-element to the right by a calc() value that depends on a CSS variable:

a:hover:after, a:focus:after {
  transform: translate(calc(var(--x, 95vw) - 2em));

All works fine so far. However, if we add a transition, the translation on hover/ focus fails in Edge (no issues in other browsers).

a:after { transition: transform 1s; }

In both the transition and no transition case, using a simple var() value instead of a calc() value with a var() inside works fine, as does using a calc() value with no var() inside.

Live demo


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “comptriage”

      Changed Status

    • Duping to internal issue tracking the same problem. It looks like we don’t “see” there is a dependency on variables when the "var(…)" is in a "calc(…)" inside a transform function.

    You need to sign in to your Microsoft account to add a comment.

    Sign in