683632 - CSS3 Animations do not operate if nested in Media queries

Status: RESOLVED DUPLICATE of bug 511909

(Core :: CSS Parsing and Computation, defect)

Description

[Camille Bissuel]

Attachment: Small test elastic website to see if CSS3 animation rule work nested into a Media queries rule

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 !

Comment 1

[Boris Zbarsky [:bzbarsky]]

> Obvioulsly it should be ;)

Actually, the CSS syntax explicitly disallows this.  Webkit deliberately violating the spec here is a known WebKit issue...

Comment 2

[Camille Bissuel]

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

[Boris Zbarsky [:bzbarsky]]

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

[Boris Zbarsky [:bzbarsky]]

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....

Comment 5

[Camille Bissuel]

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

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

http://dev.w3.org/csswg/css3-conditional/ proposes changing this, but it's not yet in CR.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This should have been fixed by bug 511909.  Could someone retest and mark duplicate if so?

Comment 8

[Camille Bissuel]

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