Jump to content
Search Community

CSSRulePlugin cannot access rules

hemmoleg test

By hemmoleg
in GSAP

Moderator Tag
 Share

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

hemmoleg test

hemmoleg

Posted
Posted

hey

 

I have an issue with the CSSRulePlugin.

 

This is the head of my website, I kept it as simple as possible to showcase my problem: 

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSRulePlugin.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="default.css" />
    <script src="js/classie.js"></script>
 </head>

 I get an error saying: "DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules"

 

JS looks like this: 

var rule = CSSRulePlugin.getRule("#t1:after");

 

But going by the error I think it has nothing to do with what rule I am trying to access.

 

However, I tried using the CSSRulesPlugin in a codepen and there it works.

What am I missing?

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Hello @hemmoleg and Welcome to the GreenSock Forum!

 

Seems like your custom JS code is running before the DOM and window is loaded, meaning your stylesheet is not loading before the GSAP getRule() runs.

 

You can do a number of things:

  1. Try placing your script tags right before the </body>  ending tag. So the DOM is almost compiled by the browser.
     
  2. Wrap your custom JS code with a DOM ready and or a window load event check to make sure that the DOM is fully ready and the window event is fully loaded. 
    // wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until external stylesheets, links, images, and other external assets are loaded in the window
  window.addEventListener("load", function(){
     
        // custom GSAP code goes here
    
  }, false);
  
});

     

  3. Make sure that the selector in your external stylesheet file has the same CSS rule that you are targeting in your getRule() code. i.e. "#t1:after"

Let us know if any of those help. If your still having an issue please create a limited codepen demo example so we can see your code in context.

 

 

Happy Tweening :)

 

 

  • Like 5
Link to comment
Share on other sites
hemmoleg test

hemmoleg

Posted
  • Author
Posted

Hello Jonathan,

 

thanks for your answer, while unfortunately none of the suggestions you made have helped I found something else. I usualy use chrome for most of my development and debugging so I only tested it there. Today I also tested it in Firefox and there it works! I am using Chrome 64.0.3282.186 64bit and Firefox 58.0.2 64bit.

Do I need to change some setting in chrome maybe?

 

Heres the codepen with my testcase:

See the Pen JpBzMq by hemmoleg (@hemmoleg) on CodePen

 

Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

Hi @hemmoleg :)

 

Are you saying the CodePen demo isn't working for you in Chrome? Or are you only seeing errors in your local testing? I ask because the demo works fine for me in all browsers. 

 

I also noticed you're using the /latest/ directory for the scripts. Those are actually older versions of TweenMax and the CSSRule plugin. For the latest versions, please use these links instead.

  

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSRulePlugin.min.js"></script>

 

Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites
hemmoleg test

hemmoleg

Posted
  • Author
Posted

The pen works fine for me in both chrome and ff. When I run it localy it also works in ff but not in chrome.  However OSUblake is right, when I test on my website, it again works in chrome and ff.  So the only issue is that its not working localy in chrome. Is that the same for you, or is it just me?

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...