Cannot use css calc() as value for css transition IE11

Duplicate Issue #212442 • See Issue #105834


May 14, 2014
This issue is public.
See progress on Bug #105834
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:

  1. assign css transition to element
  2. define end state with calc as value
  3. add class to initiate transition
  4. no transition between values

Expected Results:

You should be able to use calc() to define a value for a transition.

Actual Results:


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “IE F.”

      Changed Status to “Duplicate”

    • Here is another example.

      Open the link above in Edge and then click on one of the tiles and watch how the expanded content just appears. Compare this with Chrome, Firefox or Safari where the expanded content slides down.

      The ul li elements have a transition on the padding-bottom which uses calc in its value.

      ul li {
        transition: padding-bottom 0.5s ease;
      ul li.expanded {
        padding-bottom: calc(33.25% + 400px);

      Transitioning on a property with a value that uses calc() doesn’t work in Edge.

    • Microsoft Edge Team

      Changed Assigned To to “Rick J.”

      Changed Status from “Duplicate”

      Changed Assigned To from “Rick J.” to “Matt R.”

      Changed Status to “Duplicate”

    • This bug has marked as duplicate. Please follow the parent issue to get new updates.

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

    Sign in