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

External Issue #212442

Details

Created
May 14, 2014
Privacy
This issue is public.
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

http://jsfiddle.net/VDnd5/

  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:

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “IE F.”

      Changed Status to “External”

    • Here is another example.

      http://d-low.com/inline-block-with-expanded-item.html

      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.

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

    Sign in