CCSRule plugin always return null

[oldbeavr]

Hi,

 

I wanted to use CSSRule plugin to tween some pseudo elements on my webpage.

 

I'm using SASS to write my CSS.

 

My target looks like this :

.home,
.home.do-not-anim{

    #container{

        &:before{....}

    }

}

and my rule like this : 

var rule = CSSRulePlugin.getRule(".home #container:before");

I saw that the rule must match the exact rule of CSS. So i tried to change it with :

var rule = CSSRulePlugin.getRule(".home #container:before, .home.do-not-anim #container:before");

But the result is always the same : 

CSSRulePlugin.min.js:12 Uncaught TypeError: Cannot read property 'length' of null   

I even try to simplify the rule at it's maximum, like this :

var rule = CSSRulePlugin.getRule("#container");

witch is an existing rule in my CSS, but still, Uncaught TypeError......

 

Result is the same when i copy paste the rule in the console...

 

Did i miss something ??

              

[jamiejefferson]

Hmm, it's a pickle. Are you using the latest GSAP and CSSRulePlugin? What OS and browser are you seeing this behaviour? If you're using other Javascript libraries for your site, have you tried a clean page with just GSAP and no other libraries on the page? Just trying to work out if there is a browser issue, compatibility issue, or bug in GSAP causing this.

 

It's harder to pinpoint an error from the console when you're using the minified file. It's recommended to only use minified files for production sites, and use the original JavaScript during development for easier debugging so you can pinpoint the offending code easily.

 

Lastly, could you set up a reduced Codepen or other online demo so we could take a look? For example, here's a working Codepen of a CSSRulePlugin tween

See the Pen ibHAt by jamiejefferson (@jamiejefferson) on CodePen

[oldbeavr]

Hi,

 

Thanks for your quick reply

 

here is a codepen link:

 

See the Pen VYmZYa by anon (@anon) on CodePen

 

About minified version : I tried with the original version, to see what happened. The error occured et line 59 : 'j = curSS.length;'

I've download the zip file from the site.

 

The minified version was taken on the CDN.

 

Other libraries used on the site are : Modernizr & jquery. Both disabled, with no changes :/

 

I'll try on a clean page

 

And, i use Chrome, on Windows 7

 

 

EDIT : Ok, it seems to work on the codepen link you provided .. not on mine (missing CSSRuleplugin)

Edited December 30, 2014 by oldbeavr

[Carl]

Hi Oldbeavr

 

Here is your demo working with the scripts added (jQuery, TweenMax, CSSRulePlugin)

 

http://codepen.io/GreenSock/pen/GgNKpm

[oldbeavr]

Thanks Carl

 

I don't understand what can be the cause of the error..

 

What do you think ? problem with the CSS rule ?

[oldbeavr]

While Chrome is printing the error i mentionned before, Firefox is displaying this message :

 

DOMException [SecurityError: "The operation is insecure."
code: 18
nsresult: 0x80530012
location: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/CSSRulePlugin.min.js:12]

[Carl]

Are you loading your css over https? seems like some sort of weird cross-domain type of issue

[jamiejefferson]

I have a feeling you might be doing some local development without running a server? e.g.

 

file:///C:/mysite/index.html

 

The file protocol has some pretty restrictive security policies so it's not generally advised to develop this way. A WAMP stack is usually the way to go. I'm a XAMPP user myself.

[oldbeavr]

I'm doing local development, your're right, but i use Zend Server (Apache 2.2 & MySQL Server)

 

I'm not loading my CSS via HTTPS. It's loaded via Wordpress.

 

I tried to remove all CSS rules, but not the ones concerned, from my stylesheets (it's a responsive project). But the problem is still there

[oldbeavr]

Carl : It's sounds weird yes, the error displayed by Firefox is in a try/catch :

/Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch.

[Carl]

Ah, CSSRulePlugin is known to not find styles in media queries (see docs). 

Is that what you are doing?

[oldbeavr]

Not exactly

 

it's a mobile first project, so i use a _base.scss file, where my target is declared, but not declared in any media queries rules. On top of that, i've got two other scss (768 & 1024), where the target might be declared.

But, with grunt, those 3 files are compiled in one single styles.css file.

 

But even by removing the loading part of the media queries, it does not change anything :/

[oldbeavr]

Damn, i found it !!

 

i was loading a google fonts via a wordpress action. So it was loading a CSS from google fonts server..

 

@Carl : that might be explaining the cross domain alert..

 

 

RHHAAAA, 5 hours lost !

 

 

Is there a way to specify a unique CSS files to use with CSSrule plugin ?

[Carl]

Thanks oldbeavr. That was some good detective work. 

We are going to look into this further.

I don't have an answer for you at the moment on how to get around that. 

[Carl]

Hi

 

I'm happy to report that we were able to update CSSPlugin so that the Google font css should no longer be an issue.

Please take a look at the attached preview of CSSRulePlugin and let us know if it works for you.

Thanks again for helping us track down the issue.

 

 

 

 

CSSRulePlugin.js.zip