Jump to content
Search Community

CSSRulePlugin not longer works

Ash Shahi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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

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.
×
×
  • Create New...