Jump to content
GreenSock

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

CSSRulePlugin doesn't work in Chrome

Recommended Posts

I see strange behavior in Chrome: almost every time the script doesn't work. But sometimes, on 1/20, 1/30 reload it does. At the same time it works in the latest Edge (no extensions there except AdBlock). And the percent of working reloads is almost the same in Opera as in Chrome. Could it be any extension that interferes with GSAP?

 

Here's my test files (sorry for not Codepen):
html:
 

<!-- Begin Stylesheets -->
    <!-- Reset -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <!-- Layout -->
    <link rel="stylesheet" href="styles/layout.css">
    <!-- End Stylesheets -->

    <!-- Begin JavaScript -->
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- GreenSock -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
    <!-- PrefixFree -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <!-- Main -->
    <script src="scripts/main.js"></script>
    <!-- End JavaScript -->

 

<body>
    <div class="wrapper">
        <div class="pic"></div>
        <div class="picOverlay"></div>
        <div class="textWrapper">
            <img src="images/1_2.svg" alt="" class="text_1">
            <img src="images/3.svg" alt="" class="text_2">
            <img src="images/volvo_1.svg" alt="" class="logo">
        </div>
        <div class="overlay"></div>
    </div>
</body>

 

 

Main.js:

$(function(){

    gsap.to (CSSRulePlugin.getRule (".overlay"), {duration:3, cssRule:{backgroundColor:"blue"}, delay:0.5});

});

 

And here's the test link:

http://digitalcases.ru/2020/ek/Volvo/01/_Test/

Link to comment
Share on other sites

Hey danissimo. Usually the JavaScript should go after the content (i.e. at the bottom of the body), not before it. Try that.

Link to comment
Share on other sites

If I remember correctly, the styles can't be in external files (security restrictions imposed by the browser). In other words, <style>...</style> NOT <link rel="stylesheet" href="styles/layout.css">

Link to comment
Share on other sites

6 minutes ago, GreenSock said:

If I remember correctly, the styles can't be in external files (security restrictions imposed by the browser). In other words, <style>...</style> NOT <link rel="stylesheet" href="styles/layout.css">

In that case a page loads with errors only from a local drive, but it does work from a server (web or local). At least I don't see any errors in the Console.

Link to comment
Share on other sites

I didn't quite understand your response. Are you saying you resolved the issue by using a server to avoid the browser's security restrictions? 

Link to comment
Share on other sites

37 minutes ago, GreenSock said:

I didn't quite understand your response. Are you saying you resolved the issue by using a server to avoid the browser's security restrictions? 

I meant my test page loads external css without errors. But my script (now it's in the bottom of the page, as Zach proposed) with CSSRulePlugin still doesn't work.

http://digitalcases.ru/2020/ek/Volvo/01/_Test/

Link to comment
Share on other sites

Btw, does my page work on your browsers (turning blue)? And if you reload it a couple of times?

Link to comment
Share on other sites

11 minutes ago, danissimo said:

does my page work on your browsers (turning blue)?

It does if I open it in a new tab without that tab being open (right click link -> open in new tab). Very peculiar.

Link to comment
Share on other sites

As I said, it only works when I load it in a new tab without it being the active tab.

 

The below works just fine so it's something in your setup. Try removing pieces until you get to the bare minimum of what's causing your issue then you'll have found your issue.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Volvo XC60</title>

	<style>
		.overlay {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #F1F2F2;
		}
	</style>
</head>

<body>
	<div class="overlay"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
	<script>
		gsap.to (CSSRulePlugin.getRule (".overlay"), {duration:3, cssRule:{backgroundColor:"blue"}, delay:0.5});
	</script>
</body>
</html>

 

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.
×