Important declarations should take precedence over animations

Issue #7707487 • Assigned to Rick J.


May 26, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
  • Chrome
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

In this jsfiddle example I have set the text color of an element to red with an !important declaration, as well as applying an animation to the element that changes the text color to blue.

According to the CSS Cascading and Inheritance specification, “Important declarations from all origins take precedence over animations.” This is confirmed in the CSS Animations specification, which states that “animations override all normal rules, but are overridden by !important rules.”

I would thus expect the text to display as red (the !important declaration) rather than blue (the color applied in the animation). In Edge, though, the animation takes precedence over the !important declaration, so the color is incorrectly displayed as blue.

For comparison, this works correctly in Firefox but fails in Chrome (which has an open issue for the bug).


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To to “Rick J.”

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

    Sign in