DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

[JCKodel]

While navigating using vue-router. Nothing special. A epic-spinner is put inside a button and is shown/hiden by using v-show or v-if (both have this bug)

vue.common.js:1741 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Object.appendKeyframes (webpack:///./node_modules/epic-spinners/src/services/utils.js?:4:39)
    at VueComponent.updateAnimation (webpack:///./node_modules/epic-spinners/src/components/lib/SpringSpinner.vue?./node_modules/babel-loader/lib?%7B%22presets%22:%5B%22env%22%5D,%22plugins%22:%5B%22transform-object-rest-spread%22%5D%7D!./node_modules/vue-loader/lib/selector.js?type=script&index=0:83:23)
    at VueComponent.mounted (webpack:///./node_modules/epic-spinners/src/components/lib/SpringSpinner.vue?./node_modules/babel-loader/lib?%7B%22presets%22:%5B%22env%22%5D,%22plugins%22:%5B%22transform-object-rest-spread%22%5D%7D!./node_modules/vue-loader/lib/selector.js?type=script&index=0:76:10)
    at callHook (webpack:///./node_modules/vue/dist/vue.common.js?:2921:21)
    at Object.insert (webpack:///./node_modules/vue/dist/vue.common.js?:4158:7)
    at invokeInsertHook (webpack:///./node_modules/vue/dist/vue.common.js?:5960:28)
    at VueComponent.patch [as __patch__] (webpack:///./node_modules/vue/dist/vue.common.js?:6179:5)
    at VueComponent.Vue._update (webpack:///./node_modules/vue/dist/vue.common.js?:2670:19)
    at VueComponent.updateComponent (webpack:///./node_modules/vue/dist/vue.common.js?:2788:10)
    at Watcher.get (webpack:///./node_modules/vue/dist/vue.common.js?:3142:25)

[smartapant]

@JCKodel could you please provide a code snippet (jsfiddle for example) for us?

[smartapant]

@JCKodel not enough info to reproduce the bug, closing the issue

[JosNun]

@JCKodel Did you ever find a solution to this? I'm experiencing the same issue, but can't seem to replicate it on a CodeSandbox.

EDIT: @smartapant I did some more digging, and it appears that the error is thrown when the stylesheet that epic-spinners tries to add the keyframes to is from a different origin. Here's an example on CodeSandbox.

[BenAHammond]

This issue is constant for me, but I'm bundling my styles together into my app so I don't think its a domain issue.

appendKeyframes: function (name, frames) {
    var idx = document.styleSheets[0].cssRules.length
    document.styleSheets[0].insertRule('@keyframes ' + name + ' { ' + frames + ' }', idx)
  }

That is the code causing problems. I think it needs to check for the existence of styleSheets[0] before accessing the cssRules property.