:-ms-fill{......} animation for gradient background is not working in IE & Edge

Not reproducible Issue #23346032

Details

Author
Tamilarasan T.
Created
Aug 29, 2019
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Chrome
Found in build #
38.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

progress[value=’60’][status=’failure’]::-ms-fill,

progress[value=’100’][status=’failure’]::-ms-fill {
/Gradient background with Stripes/
background-image: -ms-linear-gradient(135deg,
transparent,
transparent 33%,
rgba(0, 0, 0, .1) 33%,
rgba(0, 0, 0, .1) 66%,
transparent 66%),
-ms-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .2)),
-ms-linear-gradient(left, #09c, #f44);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius: 3px;
animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes {
0% {
background-position: 0px 0px, 0 0, 0 0;
}
100% {
background-position: -100px 0;
}

This is my style for progress tag element. The background animation is working good in Firefox browser but animation is not working in Explorer and Edge browser.
I had visited many websites and applied many styles to animate my background but the result is same.

Attachments

0 attachments

    Comments and activity

    • Hi Tamilarasan!

      Thank you for contacting us about this issue! Could you provide me with a minimal repro on a site such as https://jsfiddle.net/?

      Thanks,

      Zach

    • Microsoft Edge Team

      Changed Assigned To to “Zachariah L.”

    • I had tried this on https://jsfiddle.net/ ,but I couldn’t see the animation what I expect.

    • Hi!

      You provide me with a live link or attach an html file if that would be easier for you.

      Thanks,
      Zach

    • Hi!

      For now, I will resolve this issue as "Not Reproducible". If you are still experiencing this problem then please feel free to reopen this issue with the information requested and I will resume my investigation.

      Thanks,

      Zach

    • Microsoft Edge Team

      Changed Status to “Not reproducible”

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

    Sign in