Important declarations should take precedence over animations

Duplicate Issue #7707378 • See Issue #7707487

Details

Created
May 26, 2016
Privacy
This issue is public.
Duplicates
See progress on Bug #7707487
Reports
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).

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

    • Note that this is a duplicate of issue 7707487. The system returned an error on my first submission so I assumed it hadn’t been received and tried again. Apologies for the duplicate.

    • Microsoft Edge Team

      Changed Status to “Duplicate”

    • Thank you for the update about the duplicate. We are currently investigating this issue.

      Primary Bug : https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7707487/

      Best regards,
      The MS Edge Team.

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

    Sign in