Transition doesn't work with calc()

External Issue #7128334

Details

Author
Mateusz J.
Created
Apr 6, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
20.10240
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

When you change property of element to calc() transition won’t apply to it.
For example here div smoothly increases dimensions:

div {
width: 60px;
height: 60px;
transition: all 1s;
}
div:hover {
width: 100px;
height: 60px;
}

and here it just ‘jumps’ to bigger dimensions:

div {
width: 60px;
height: 60px;
transition: all 1s;
}
div:hover {
width: calc(100px);
height: calc(100px);
}

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Ibrahim O.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To from “Rick J.” to “Shashank T.”

      Changed Status to “External”

    • This is also the case on Win10 Mobile Edge browsers

    • This issue has been resolved
      External. This means this issue may require a new feature to be implemented or
      other work that is more significant than a typical bug. You may be able to find
      more information on this issue by searching for related features on 

      status.microsoftedge.com

       and 

      uservoice.microsoftedge.com

      .

      All the  best,

      The MS Edge Team

    • By external fix do you mean use Chrome instead :)

    • Roasted :D

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

    Sign in