uglifycss icon indicating copy to clipboard operation
uglifycss copied to clipboard

Percent Sign is Stripped From Keyframes Causing Them to Fail

Open LiterallyDoge opened this issue 6 years ago • 1 comments

Hi and thanks for this plugin.

If you define:

@keyframes fancy-mouse-breathing-animation {
	0% {
		background-color: rgba(0,255,0, 1);
	}

	50% {	
		background-color: rgba(0,255,0, 0.33);
	}

	100% {
		background-color: rgba(0,255,0, 1);
	}
}

And then run uglifyCSS, the % symbol will be omitted from the output on 0 (probably because you are assuming that all 0's are 0 and the percentage is superfluous - which in this case it is not, because it is acting as a keyword and not a value), causing Chrome to fail to see it as a valid state, and the animation will "crash."

Is this fixable?

LiterallyDoge avatar Aug 31 '18 18:08 LiterallyDoge

Yeah this is a known bug with yuicompressor. Ran across this recently with background-color:hsla(0,0%,100%,.9);which gets minfiied to (0,0,100%,.9), which actually causes the css property to fail applying (a bit silly to be fair the browser should just accept 0, if only for shortening purposes, but that's beside the pt).

So I was looking for an alternative. I found this, but you just confirm my hunch.. . a port of yuicompressor will have the same issues. So the solution afaik, is to simply not use yuicompressor anymore.

For fmarcia fyi the bug in question is fixed on master of the yuicompressor repo.. (cf. link above).

fabd avatar Sep 21 '18 10:09 fabd