Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ash Shahi

CSSRulePlugin not longer works

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

error.jpg

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Screen Shot 2019-03-11 at 7.56.03 AM.jpg

Screen Shot 2019-03-11 at 7.55.16 AM.jpg

Link to comment
Share on other sites

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

Thanks!

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

yeah, that codepen demo works fine for me too. 

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×