New issue
Advanced search Search tips

Issue 552085 link

Starred by 12 users

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature



Sign in to add a comment

!important rules do not override CSS animations

Reported by s...@seanmhanson.com, Nov 5 2015

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Create an element with a CSS keyframes animation changing a given property
2. Override the given property to another value using !important

What is the expected behavior?
Important declarations should override Animation declarations (as listed in https://drafts.csswg.org/css-cascade/#cascade-origin )

What went wrong?
Animation declarations continue to override important declarations.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 46.0.2490.80  Channel: stable
OS Version: OS X 10.10.2
Flash Version: Shockwave Flash 19.0 r0

This is also seen in 223450, which was closed out as Won't Fix since it was opened prior to the spec change for !important.

This is properly implemented in Mozilla.
 

Comment 1 by tkent@chromium.org, Nov 6 2015

Labels: -Cr-Blink Cr-Blink-CSS
Labels: -Type-Bug -OS-Mac Type-Feature OS-All Hotlist-Interop
Status: Available

Comment 3 by nainar@chromium.org, Feb 10 2016

Labels: Cr-Blink-Animation
Cc: suzyh@chromium.org
Summary: !important rules do not override CSS animations (was: !important precedence no longer meets W3C specs (over animation))

Comment 5 by timloh@chromium.org, May 26 2016

 Issue 223450  has been merged into this issue.

Comment 6 by loyso@chromium.org, May 26 2016

Components: -Blink>CSS
Labels: Update-quarterly
Why is this issue marked as a "Feature request"? It should definitely be considered a bug because the current behavior violates both CSS Cascade spec (which has been Candidate Recommendation for more than a year) and CSS Animations spec. And this is a significant interoperability issue.

Comment 8 by suzyh@chromium.org, Jun 13 2017

Cc: -suzyh@chromium.org

Comment 9 by fim...@gmail.com, Aug 23 2017

We ran into this at work today, I have made a simple demo:
https://codepen.io/fimion/pen/rzKmza

animations override an inlined !important tag.
Are there any plans to fix this and make CSS Animations interoperable?
Project Member

Comment 11 by bugdroid1@chromium.org, Dec 7

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/155df253bc1fbbff79ae6e72b6b9eba95adb972d

commit 155df253bc1fbbff79ae6e72b6b9eba95adb972d
Author: Eric Willigers <ericwilligers@chromium.org>
Date: Fri Dec 07 04:36:45 2018

[CSS Animations] !important fails to override

Blink currently fails the css-cascade/important-prop.html WPT

BUG=552085

Change-Id: Ida8839e7aa81b7dd6fd05a32248406e7fa6126c5
Reviewed-on: https://chromium-review.googlesource.com/c/1366459
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#614592}
[modify] https://crrev.com/155df253bc1fbbff79ae6e72b6b9eba95adb972d/third_party/blink/web_tests/TestExpectations

Sign in to add a comment