CSSRulePlugin not longer works

[Ash Shahi 0 Likes (Newbie)]

Hi,

 

I have the following code:

var rule = CSSRulePlugin.getRule(".myClass:before"); //get the rule
TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}});

 

But it looks like it is being blocked by the newer versions of chrome and Firefox. 

In chrome I get 

Quote

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

 

and in Firefox I get 

Quote

DOMException: "The operation is insecure.

 

Is it time stop using this plugin or is there a way around this?

 

Thanks

[GreenSock 8,117 Likes (Superhero)]

Hm, got a codepen demo? That'd really help. What version? 

[Ash Shahi 0 Likes (Newbie)]

2 minutes ago, GreenSock said:

Hm, got a codepen demo? That'd really help. What version? 

 

I'm developing it locally, with vue and webpack. I've pulled the latest version from npm:

 

npm install gsap --save-dev


import { TweenMax, CSSPlugin, TimelineMax } from "gsap/all";

 

I've seen this example working in your codepen  examples but when I copy your examples into my app both chrome and firefox block access to the DOM elements.

 

<template>
  <div class="intro">
    <div ref="stars" class="stars"></div>
  </div>
</template>

<script>
import { TweenMax, CSSPlugin, TimelineMax } from "gsap/all";

export default {
  name: "Intro",
  data() {
    return {
      images: {
        stardust: require("@/assets/images/stardust.png")
      }
    };
  },
  mounted() {
    // const { stars } = this.$refs;
    // const introAnimation = new TimelineMax();
    // introAnimation.to(stars, 8, { y: -1300 });

    const rule = CSSRulePlugin.getRule(".stars:before"); //get the rule
    TweenLite.to(rule, 3, { cssRule: { color: "red" } });
  }
};
</script>

 

I've attached a screenshot.

 

Could this be related to this issue on stackoverflow? 

https://stackoverflow.com/questions/49088507/cannot-access-rules-in-external-cssstylesheet

 

Thanks

[GreenSock 8,117 Likes (Superhero)]

It looks like you forgot to import CSSRulePlugin.  

 

I also wonder if you need to set your script type to module, like <script type="module"> since you're doing imports. 

 

If you're still having trouble, it'd be SUUUUPER helpful to see a reduced test case in codepen or codesandbox or something like that. We'd love to help. 

[rafaguilar 0 Likes (Newbie)]

Jack, even from your greensock website the codepen demo, it seems to be failing.

[Carl 9,066 Likes (Superhero)]

Can you please supply the link to the CodePen that isn't working?

Thanks!

[rafaguilar 0 Likes (Newbie)]

37 minutes ago, Carl said:

Can you please supply the link to the CodePen that isn't working?

Thanks!

Sure Carl, it is in greensock site:

https://greensock.com/CSSRulePlugin

[Dipscom 2,815 Likes (Superhero)]

6 minutes ago, rafaguilar said:

Sure Carl, it is in greensock site:

https://greensock.com/CSSRulePlugin

 

Hey Rafa,

 

I've just checked the link you are referring to and did not see any errors. What browser are you using? Have you got any extension that could potentially be blocking stuff?

[Carl 9,066 Likes (Superhero)]

yeah, that codepen demo works fine for me too. 

[rafaguilar 0 Likes (Newbie)]

8 minutes ago, Carl said:

yeah, that codepen demo works fine for me too. 

No extensions installed.

Chrome and Safari are working but every time triggers the error, by another hand Safari just doesn't work at all.

Chrome 72.03626.121

Firefox 65.0.1

Safari 12.0.3 (14606.4.5)

[Carl 9,066 Likes (Superhero)]

Chrome and Safari are working but every time triggers the error, by another hand Safari just doesn't work at all.

 

that's a bit confusing. I'm guessing one of those should be FireFox.

 

I see it working fine in Chrome and FireFox, but it does not work in Safari.

I'm sure @GreenSock will investigate further and let you know of any possible solutions / workarounds.

 

Thanks for reporting the issue.

 

 

See the Pen atgzI?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Jonathan 5,176 Likes (Superhero)]

Hi @rafaguilar

 

Just to make sure that this is a Codepen issue VS a GSAP issue.

 

Can you please test the below codepen link in Safai and see if it still throws that error. The reason being is that codepen runs in an iframe but when you change in the codepen URL /pen/ to /dug/ it runs the codpen without an iframe.

 

https://codepen.io/GreenSock/debug/atgzI

 

Let us know if you still see that error in Safari and it doesn't work?

 

Thanks

[Dipscom 2,815 Likes (Superhero)]

5 minutes ago, Jonathan said:

Let us know if you still see that error in Safari and it doesn't work?

 

I can reproduce the bug in Safari, yes.

 

For some strange reason, though, I get no errors in the console.

[Visual-Q 586 Likes (Leader)]

I see the error in Safari in both links. I think it's an issue with the pseudo selector.

 

It works if you apply the animation to the ".box" item instead of the '.box:after"

 

See the Pen MxvNPG by Visual-Q (@Visual-Q) on CodePen

 

[rafaguilar 0 Likes (Newbie)]

1 hour ago, Dipscom said:

 

I can reproduce the bug in Safari, yes.

 

For some strange reason, though, I get no errors in the console.

This works fine without any error in Chrome and Firefox, still, doesn't work in Safari.
https://codepen.io/GreenSock/debug/atgzI

[GreenSock 8,117 Likes (Superhero)]

4 hours ago, rafaguilar said:

Jack, even from your greensock website the codepen demo, it seems to be failing.

 

Ah, that was using a SUPER old version (updated now). The problem is that Safari changed its behavior suddenly; that's why we had to update the plugin recently to work around that Safari change. I'd definitely consider it a Safari bug...but again, our recent version of CSSRulePlugin implemented a workaround. Once I updated, it seemed to work fine for me. Let me know if you see something different. Latest version of GSAP (2.1.2) has that fix in place for CSSRulePlugin.