Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mntad

CSSRulePlugin Not working

Recommended Posts

hello so i tried using CSSRulePlugin.js it worked fine in local i'm using django default local server but when i load it in the production server it doesn't work at all i tried using gsap cdn  my cdn from amazon loading if from the same domain but nothing seems to work the console prints me

Quote

'DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Function.CSSRulePlugin.getRule (https://www.mntad.com/static/js/CSSRulePlugin.js:60:19)'

my code is :

Quote

var rule3 = CSSRulePlugin.getRule(".hamburger-inner");

var rule1 = CSSRulePlugin.getRule(".hamburger--collapse.is-active .hamburger-inner:after");

var rule2 = CSSRulePlugin.getRule(".hamburger--collapse.is-active .hamburger-inner:before");

var rule4 = CSSRulePlugin.getRule(".navbg");

here is the website the animation trigger when you click on the hamburger

https://www.mntad.com/

Link to post
Share on other sites

Welcome to the forums, @Mntad. It's tough to diagnose a live site like that, but I'd make two suggestions:

  1. Make sure you're using the latest GreenSock files. It looks like you're using a file that's REALLY old (2014). 
  2. Try creating a reduced test case that demonstrates the issue, hopefully in something like codepen so that we can tinker around and see exactly what's going on. 

You are writing the rules exactly as you have them in the CSS, right? 

 

Also, you might want to check this out: https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760

  • Like 4
Link to post
Share on other sites
6 hours ago, GreenSock said:

Welcome to the forums, @Mntad. It's tough to diagnose a live site like that, but I'd make two suggestions:

  1. Make sure you're using the latest GreenSock files. It looks like you're using a file that's REALLY old (2014). 
  2. Try creating a reduced test case that demonstrates the issue, hopefully in something like codepen so that we can tinker around and see exactly what's going on. 

You are writing the rules exactly as you have them in the CSS, right? 

 

Also, you might want to check this out: https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760

Hi again this is exactly what i'm using in my live website  with the same jquery and gsap cdn with the latest versions everything seems to work fine in codepen but in my website it returns TweenMax.min.js:17 Uncaught Cannot tween a null target. the problem i  triggers when i click on the hamburger  i console log the output of selected classes with CssPlugin and i've got 'undefined'  you can check it from https://www.mntad.com/

See the Pen aRaRxQ by brahimchougrani (@brahimchougrani) on CodePen

 

Link to post
Share on other sites

Hello @Mntad and welcome to the GreenSock Forum!

 

Usually that error happens because your GSAP getRule() code is running before your CSS your trying to reference in your GSAP code CSSRulePlugin.getRule(). So if your JS is trying to getRule() that hasnt been loaded in to memory then you will get that error about accessing the CSS Rules.

 

I notice you have a DOM ready your checking before running your code. You might want to put a window load event inside your DOM ready event. The reason being is that DOM ready doesnt check for external CSS files being loaded. That check happens with the window load event which makes sure all external aseets like images, links, fonts, CSS stylesheets, and JS scripts are loaded.

 

Try this since your using jQuery to make sure your code doesn't run until all assets a have been loaded:

 

// wait until the DOM is fully loaded (html, svg, markup etc)
$(document).ready(function() {
  
    // wait until all external assets are loaded (css stylesheets, js scripts, fonts, images, etc)
    $(window).bind("load", function() {
    
        // custom GSAP code goes here
    
    });
  
});

 

Happy Tweening! :)

  • Like 5
Link to post
Share on other sites
26 minutes ago, Jonathan said:

Hello @Mntad and welcome to the GreenSock Forum!

 

Usually that error happens because your GSAP getRule() code is running before your CSS your trying to reference in your GSAP code CSSRulePlugin.getRule(). So if your JS is trying to getRule() that hasnt been loaded in to memory then you will get that error about accessing the CSS Rules.

 

I notice you have a DOM ready your checking before running your code. You might want to put a window load event inside your DOM ready event. The reason being is that DOM ready doesnt check for external CSS files being loaded. That check happens with the window load event which makes sure all external aseets like images, links, fonts, CSS stylesheets, and JS scripts are loaded.

 

Try this since your using jQuery to make sure your code doesn't run until all assets a have been loaded:

 


// wait until the DOM is fully loaded (html, svg, markup etc)
$(document).ready(function() {
  
    // wait until all external assets are loaded (css stylesheets, js scripts, fonts, images, etc)
    $(window).bind("load", function() {
    
        // custom GSAP code goes here
    
    });
  
});

 

Happy Tweening! :)

Hi @Jonathan thank's for the reply i tried what you've suggested well the code got executed after everything loads but i'm still getting the same error of undefined 

Link to post
Share on other sites

Hi again,

 

To me this looks unrelated to GSAP since i'm seeing a lot of errors that happen before GSAP gets run.
 

It looks like you have some cross domain policy security issues going on in your site. Your trying to bring in scripts from another domain which is triggering the browser sandbox security for the same origin policy

 

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

 

I see tons of errors not related to GSAP, that is why your having issues:

 

Loading failed for the <script> with source https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592”.

Content Security Policy: The pages settings blocked the loading of a resource at https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592 (“script-src”)

undefined project.js:204

undefined project.js:205

undefined project.js:206

undefined project.js:207

 

I'll echo what @GreenSock Jack advised if running locally you will need to make sure your using a local testing envirnoment like XAMPP or MAPP so Chrome doesn't trigger its local sandbox for security.

 

:)

  • Like 3
Link to post
Share on other sites
3 hours ago, Jonathan said:

Hi again,

 

To me this looks unrelated to GSAP since i'm seeing a lot of errors that happen before GSAP gets run.
 

It looks like you have some cross domain policy security issues going on in your site. Your trying to bring in scripts from another domain which is triggering the browser sandbox security for the same origin policy

 

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

 

I see tons of errors not related to GSAP, that is why your having issues:

 


Loading failed for the <script> with source https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592”.

Content Security Policy: The pages settings blocked the loading of a resource at https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592 (“script-src”)

undefined project.js:204

undefined project.js:205

undefined project.js:206

undefined project.js:207

 

I'll echo what @GreenSock Jack advised if running locally you will need to make sure your using a local testing envirnoment like XAMPP or MAPP so Chrome doesn't trigger its local sandbox for security.

 

:)

@Jonathan Thanks again i really appreciate your help the problem is the tweens are working fine in development environment but not on the live server  i fixed all the problems related to content security policy but still having error i'm hosting my fiels in aws s3 and these are my cors settings my fiels are public and i have access to them i'm having a trouble figuring it out  

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

 

Link to post
Share on other sites

This may not be related, but it looks like the browser is also throwing a warning due to excessive high memory usage of the CSS will-change property. The will-change property should only be used as a last resort to fix minor performance issues of elements. It should not be used all the time.

 

CSS will-change: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

 

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1157760 px). Occurrences of will-change over the budget will be ignored. www.mntad.com

 

As far as CORS, I have never messed with that.

 

:)

  • Like 2
Link to post
Share on other sites

Also after closer inspection when i debug the page. I get a security error when it tries to access the CSSRulePlugin getRule() method. So it look like that GSAP is doing what its supposed to, but the browser is throwing a security warning for the reading and parsing of the CSS stylesheet.

 

SecurityError: The operation is insecure.

 

:)

  • Like 2
Link to post
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.

×