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 4 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.

    • this is really something that developers need, for instance support slide navigation on both mobile and desktop see this very well written example

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

    Sign in