Add cssRule

[henkeklein]

Error: Failed to execute 'insertRule' on 'CSSStyleSheet in Chrome v65. Issue in ui-scroll.js: funtion addCSSRule

Solution: Simply surround with try/ catch?

[dhilt]

@henkeklein Thanks for the issue!

I tried to run different demos with angular-ui-scroll v1.7.0 on Chrome v65.0.3325.181 and didn't see any issues with CSSStyleSheet.insertRule. This method is being called on the app start by the addCSSRule function execution (elementRoutines.js) and works fine for me.

What version of the ui-scroll are you using? what OS? What is the full error message? How many scroller instances do you have on the page that fails with that error? Maybe you can provide a runnable repro?

Also, this topic may be helpful...

[henkeklein]

So just saw that I am using v1.6.2 so maybe the problem will disappear just upgrading.

I have only 1 instances on the page egen is fails. Thanka for the advice!

[dhilt]

@henkeklein I believe, addCSSRule method appeared after v1.6.2, so it's weird... Anyway we need more details to continue (OS and full error log) or/and repro.

[PabloMR92]

I'm having the exact same problem on Windows x64. Chrome (Versión 65.0.3325.181). The error only appears occasionally, after I transition from another state (it does not happen when I hit F5 to refresh the page). With only 1 ui-scroll on the screen, this is the console error:

index.js:56814 DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule at addCSSRule (https://localhost:3010/index.js:159918:15) at new ElementRoutines (https://localhost:3010/index.js:159931:9) at Object.link (https://localhost:3010/index.js:159062:31) at https://localhost:3010/index.js:43499:18 at invokeLinkFn (https://localhost:3010/index.js:52659:9) at nodeLinkFn (https://localhost:3010/index.js:52048:11) at compositeLinkFn (https://localhost:3010/index.js:51288:13) at nodeLinkFn (https://localhost:3010/index.js:52042:11) at compositeLinkFn (https://localhost:3010/index.js:51288:13) at compositeLinkFn (https://localhost:3010/index.js:51291:13) "<!---->"

I'm currently using the 1.7.0 version of ui-scroll. As a dirty fix I've just added

'.ng-ui-scroll-hide {
  display: none;
}'

To one of my stylesheets, while commenting the call to addCSSRule:

function ElementRoutines($injector, $q) {
        _classCallCheck(this, ElementRoutines);

        this.$animate = $injector.has && $injector.has('$animate') ? $injector.get('$animate') : null;
        this.isAngularVersionLessThen1_3 = angular.version.major === 1 && angular.version.minor < 3;
        this.$q = $q;
        // addCSSRule(document.styleSheets[0], '.' + hideClassToken, 'display: none');
      }

[dhilt]

@PabloMR92 Thanks for the details! If the bug appears only during state transitions (ui-router?) and does not appear on the App start, then I know how I will fix it. @henkeklein Can you confirm that you don't see the issue right after the App start too?

[henkeklein]

Exactly, it does not appear on App start only after state transitions.

[dhilt]

Okay! Here's the Pull Request with the issue fix: Add css rules on the App start. @henkeklein @PabloMR92 May I ask you to try the updated distributive before merging it to 'master'? Does it solve the problem? Thanks!

[PabloMR92]

Works like a charm, thank you very much!

[dhilt]

v1.7.1 has just been released, and soon it will be available via npm. Thanks!

[henkeklein]

Thanks a lot, problem solved :)!