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).
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Ibrahim O.”
Changed Assigned To to “Rick J.”