Ember CLi SC is not defined when using css animation

I have a music component in an ember application using SoundCloud API, i have recently added a css animation with Font-awesome. See codepen

This is my markup

<div class="gears">
    <i class="fa fa-cog fa-spin fa-fw small"></i>
    <i class="fa fa-cog fa-counter fa-fw big"></i>
</div>

After that my music component stopped working in chrome and JS hint is giving me a 'SC' is not defined here

    return SC.stream(favoritePath, {
        whileplaying: function() {
            return self.set('currentFavoritePosition', this.position);
        },
        onbufferchange: function() {
            return self.set('isBuffering', this.isBuffering);
        },
        onfinish: function() {
            self.set('isPlaying', false);
            if (self.get('nextFavorite') != null) {
                return self.send('selectFavorite', self.get('nextFavorite'), index);
            }
            self.set('favorite.artwork_url', nextFavorite.artwork_url);
        }

In Safari and Firefox there is no problem, the music component is working.

I read that there is an issue about troubles of identifying this kind of global objects by JSHint, but i don't know if there is a connection with my case and why this happened after this animation and only in Chrome