CSS animation with css variables don't work

External Issue #14020455

Details

Author
Jakub J.
Created
Sep 30, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I have css animation that look like this that don’t work, it work in other browsers:

@keyframes size {
    50% {
        transform: scaleX(calc(1 / var(--width)));
        opacity: 1;
    }
    98% {
        transform: scaleX(calc(1 / var(--width))) scaleY(calc(1 / var(--height)));
        opacity: 1;
    }
    100% {
        transform: scaleX(calc(1 / var(--width))) scaleY(calc(1 / var(--height)));
        opacity: 0;
    }  
}


.tv.collapse {
    animation: size 2s ease-out;
    animation-fill-mode: forwards;
}

–width and --height is set in JavaScript based on window size (100vw and 100vh don’t work)

you can see the demo here, when you press exit it should collapse the terminal but it only apply animation of opacity.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “wptcomptri@microsoft.com”

      Changed Assigned To to “bbrinza”

      Changed Status to “External”

    • This is actually not due to custom properties but due to not supporting calc() within scale() and rotate() transform functions. I have resolved this as duplicate to the deliverable for that feature. Thank you for filing.

    • 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.

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

    Sign in