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

Issue #105834

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Found in build #
0.0010
Reports
Reported by 4 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

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

    Sign in