Fix spinner animation in prod build

[passy]

Pretty sure that one of the assetgraph septs breaks it.

[Munter]

Is it a css keyframe animation?

[passy]

@Munter Yes it is. :)

https://github.com/passy/ctlmngr/blob/705add7cacfb30766334db8ab7c392fa78ef334b/app/styles/_spinner.css

[Munter]

I bet one of the properties is getting lost in CSSOM. What's the CSS output of that section?

[passy]

Beautified output is

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.lea-spinner {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 5em;
    margin: 0 .5em;
    font-size: 12px;
    text-indent: 999em;
    overflow: hidden;
    -webkit-animation: spin 1s infinite steps(8);
    animation: spin 1s infinite steps(8)
}

Which looks absolutely fine to me. It seems like the steps(8) attribute is being ignored for some reason.

[passy]

Oh, and it only happens in Chrome. Maybe this is an odd bug related to dropping the last semicolons?

[Munter]

Or the added -webkit- prefix

[passy]

Okay, I'll need to do some more investigation. But the output looks generally good, I'm sure the bug is in either Chrome, Autoprefixer or the css minifier.

Pascal Hartig Software Engineer

http://passy.me/ Twitter: https://twitter.com/passy Google+: http://gplus.to/passy

On Mon, Jun 2, 2014 at 3:06 PM, Peter Müller notifications@github.com wrote:

Or the added -webkit- prefix

— Reply to this email directly or view it on GitHub https://github.com/passy/ctlmngr/issues/35#issuecomment-44840678.