search

gmelikov / cssmin

Automatically exported from code.google.com/p/cssmin
0 stars 0 forks source link

@keyframe name surrounded by quotes not supported by firefox #48

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What version of CssMin are you using (source and/or build)?
3.0.1

What was the input stylesheet and/or configuration options?
@keyframes rotateThis {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

What is the expected result?
...
@-moz-keyframes rotateThis {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
...

And what is the actual result and/or error message?
...
@-moz-keyframes "rotateThis" {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
...

Please provide any additional information below.
Adding these quotes to the name of the keyframe breaks the animation in firefox.
Tested in Firefox 7.0.1

Also effects the CSS Formatters.

Original issue reported on code.google.com by supp...@labs.ft.com on 16 Nov 2011 at 11:11

GoogleCodeExporter commented 9 years ago 
Thanks for reporting.

Original comment by joe.scylla on 16 Nov 2011 at 11:15

GoogleCodeExporter commented 9 years ago 
Patch.

Original comment by audvare on 19 Jan 2012 at 3:20

Attachments:

GoogleCodeExporter commented 9 years ago 
The W3C CSS validator also reports quoted names as an error. It might be a good 
idea to not quote the name at all.

http://jigsaw.w3.org/css-validator/validator?text=@keyframes%20%22rotateThis%22%
20{%20from%20{%20transform:%20rotate%280deg%29;%20}%20to%20{%20transform:%20rota
te%28360deg%29;%20}%20}&profile_input=css3

Original comment by florian....@googlemail.com on 27 Aug 2013 at 1:49

GoogleCodeExporter commented 9 years ago 
Sorry, malformed URL in my above comment.

http://jigsaw.w3.org/css-validator/validator?text=%40keyframes%20%22rotateThis%2
2%20%7B%20from%20%7B%20transform%3A%20rotate(0deg)%3B%20%7D%20to%20%7B%20transfo
rm%3A%20rotate(360deg)%3B%20%7D%20%7D&profile_input=css3

Original comment by florian....@googlemail.com on 27 Aug 2013 at 2:10

GoogleCodeExporter commented 9 years ago 
I've noticed the same problem, with the slight variation:
@keyframes theanimation { ... }
@-webkit-keyframes theanimation { ... }
/* but no "@-moz-keyframes theanimation { ... }" rules are present */
So, in some firefox versions this is processed fine without minification, but 
it's not processed after cssmin.

I hope the attached patch helps.

Original comment by gonzalo....@gmail.com on 5 Feb 2014 at 12:12

Attachments: