CSSRule Undefined In Chrome, FF Fine

[d1ch0t0my 6 Likes (Newbie)]

Hi guys,

 

I'm using the CSSRule plugin and have run into an issue that seems only present in Chrome. FF and Safari are fine. In my stylesheet I have the following rule:

.cloned:after {content: '';position: absolute;z-index: -1;width: 100%;height: 100%;opacity: 0;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}

...and in my script I have the following:

shadow = CSSRulePlugin.getRule(".cloned:after");

(...referenced in a timeline later as below)

.to(shadow, 0.4, {cssRule:{opacity:1}}, 0.5)

On Firefox and Safari if I print out to console.log I see the rule as expected and everything works fine yet in Chrome I see: "Undefined" and then "Uncaught Cannot tween a null target" which halts the animation due to the error.

 

If there was an error in the code surely FF and Safari would pick it up as well but they have no issue. It's Chrome specific.

 

I'm literally on my way out the door so will make a codepen when i get back in a couple of hours, apologies for not doing now. Thanks!

 

[d1ch0t0my 6 Likes (Newbie)]

Hmm so I put together a Pen but can't reproduce this issue. I'll have to take apart my code bit by bit to see what's causing it.

[Carl 11,097 Likes (Superhero)]

Thanks for trying to make the demo. Keep us posted if you can replicate it breaking. Off the top of my head I'm not sure what it could be.