CSS Animation and Transitions don't accept "calc()" as property values

Confirmed Issue #105834 • Assigned to Rick J.


Apr 27, 2014
This issue is public.
Found in build #
Reported by 20 people

Sign in to watch or report this issue.

Steps to reproduce

URL = http://fremycompany.com/temp/2011-12/anim-test-5.html


<!doctype html>
<title>Animation test</title>

    @-ms-keyframes anim {
        0%   { top: 0%;  left: 50%; }
        25%  { top: 50%; left: calc(100% - 100px); }
        50%  { top: calc(100% - 100px); left: 50%; }
        75%  { top: 50%; left: 0%;  }
        100% { top: 0%; left: 50%; }
    div {
        position: absolute;
        width: 100px; height: 100px; background: lime;
        border-radius: 50px;
        -o-animation: anim 10s infinite linear;
        -ms-animation: anim 10s infinite linear;
        -moz-animation: anim 10s infinite linear;
        -webkit-animation: anim 10s infinite linear;
        -o-transition: all 1s;
        -ms-transition: all 1s;
        -moz-transition: all 1s;
        -webit-transition: all 1s;
    div:hover {
        background: yellow;




==== 4/2/2012 edited by a-rocoll =======================

URL: http://fremycompany.com/temp/2011-12/anim-test-5.html
Failed (repro-ed)
Safari 5.1 (7534.50)
chrome 14.0.835.187 m
opera 11.51
iexplore 9.00.8112.16421
iepreview 10.00.1008.16421
ie10pp5 10.0.8250.0
ie10 10.0.8308.0
Passed (no repro)
firefox 6.0.2

1. Nviaget to http://fremycompany.com/temp/2011-12/anim-test-5.html

Page shows two animated columns.
IE shows two columns, but only the top one is animated. Only firefox shows two animated columns. Other browsers show one animated columns, except for Opera and IE9 which show two unanimated columns.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Matt R.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Matt R.” to “IPBS P.”

      Changed Status from “Confirmed”

      Changed Assigned To from “IPBS P.” to “Christian F.”

    • 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





      All the best,

      The MS Edge Team


    • This issue appears to still be present, currently using Edge version 38.14393.0.0

    • The issue is still here in Edge 40.15063.0.0 :(

    • Hi Edge Team, your uservoice admins do not consider it as an external work but only a bug. Please enhance the browser with this issue fixed asap! Thanks :)

    • Microsoft Edge Team

      Changed Assigned To to “Rick J.”

      Changed Status

      Changed Title from “CSS Animation don't accept "calc()" as property values” to “CSS Animation and Transitions don't accept "calc()" as property values”

      Changed Status to “Confirmed”

    • Thanks for confirming the issue
      Hope you can fix it soon.
      Thanks team😊

    • Any news on this? Still an issue in Edge 42

    • Hi Edge team, facing similar problem in edge .

      when width is calculated using calc() function then transition is not happening.
      Please let me know if there are any updates on this issue.
      Please fix this issue as its really difficult to work with edge and handle animations.

    • Any updates on this? It’s a quite old issue…

    • I like how this issue is first flagged in 2014, still not fixed.

    • I hope we will get fix some day… 😟

    • I hope we will get fix some day… 😟

    • Still broken 4 and half years later.

    • Just noticed it today. The other browsers don’t have this issue, even Edge mobile doesn’t have it (verified on Android). The problem is with Edge desktop. Please fix it!!! 😠

    • fix ples

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

    Sign in