Closed
Bug 683632
Opened 13 years ago
Closed 12 years ago
CSS3 Animations do not operate if nested in Media queries
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 511909
People
(Reporter: cbissuel, Unassigned)
Details
Attachments
(1 file)
3.28 KB,
application/octet-stream
|
Details |
If a CSS3 Animation rule is nested into an @media rule, it do not render : element is rendered unanimated. Obvioulsly it should be ;) If the animation rule is not nested (in the base stylesheet), it works. Works also in webkit browsers I can test. As far as I can test, it do no matter if the rule is in a linked stylsheet or included in the HTML. Please see the small test "elastic" website attached : the CSS3 Animation rule is placed in "two-column.css". Thanks for your great work so far by the way !
Reporter | ||
Updated•13 years ago
|
OS: Linux → All
Hardware: x86_64 → All
Comment 1•13 years ago
|
||
> Obvioulsly it should be ;)
Actually, the CSS syntax explicitly disallows this. Webkit deliberately violating the spec here is a known WebKit issue...
Reporter | ||
Comment 2•13 years ago
|
||
Mmmh... I'm not complaining, but maybe a spec issue so ? How I am supposed to do a light (in octets) mobile stylesheet if I include heavy animation rules in the base stylesheet ?
Comment 3•13 years ago
|
||
And in particular, http://www.w3.org/TR/css3-syntax/#grammar0 and http://www.w3.org/TR/CSS21/grammar.html both say this: media : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S* ; ruleset : selector [ ',' S* selector ]* '{' S* declaration? [ ';' S* declaration? ]* '}' S* ; which does not allow at-rules inside @media. There's a note on CSS3-syntax that this might be a possible change that needs to be made to the core grammar, but right now the spec requires that nested @-rules not work.
Comment 4•13 years ago
|
||
The simplest way to deal with your problem for the time being is to put the animation rules in an external sheet and use media queries on the @import or <link> that you use to pull that sheet in. Note that the external sheet could use a data: URI if you want to reduce the number of server connections....
Reporter | ||
Comment 5•13 years ago
|
||
Ok, thanks for the tip : really useful, but quite complicated to set up ;) Learning every day... I'll stay on the CC List of this bug if any update occur in futur about the spec. Thanks again
http://dev.w3.org/csswg/css3-conditional/ proposes changing this, but it's not yet in CR.
This should have been fixed by bug 511909. Could someone retest and mark duplicate if so?
Reporter | ||
Comment 8•12 years ago
|
||
Hi, just tested with Firefox 11, and it is fixed ! Thanks for your great work ! PS : As suggested by David Baron, I mark this bug as duplicate
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•