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

Confirmed Issue #105834 • Assigned to Rick J.

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Found in build #
0.0010
Reports
Reported by 14 people

Sign in to watch or report this issue.

Steps to reproduce

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

URL:
N/A

REPRO STEPS:
<!doctype html>
<html>
<head>
<title>Animation test</title>
<style><!–

    @-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;
    }
    
    --></style>
</head>
<body>      
    <div></div>
</body>

</html>

EXPECTED RESULTS:
/

ACTUAL RESULTS:
/

==== 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

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

EXPECTED RESULTS:
Page shows two animated columns.
ACTUAL RESULTS:
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.

Attachments

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

      status.microsoftedge.com

       and 

      uservoice.microsoftedge.com

      .

      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 :)
      https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/17930206-calc-keyframe

    • 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… 😟

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

    Sign in