Jump to content
Search Community

Linear gradient IE Bug / CSS TweenMax

Technics1210 test
Moderator Tag

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

Hi Greensock Team,

 

i was working on an Hover Effect for a button with a CSS gradient i am moving with TweenMax.

 

The CSS for the gradient I created with the "www.colorzilla.com/gradient-editor/" where you can easily create cross-browser-safe CSS gradients.

 

Everything works fine in all browsers but besides the IE (Win7 / IE 11.0.96...) where the console of the IE is getting some errors and nothing happens.

 

I think it has to do with the CSS "background: linear-gradient" where TweenMax seems to have some problems with...

 

Check out the codepen, where I simplified some stuff.

See the Pen ozQYgE by technics1210 (@technics1210) on CodePen

Link to comment
Share on other sites

Hello Technics1210,

 

That is happening probably because IE has a very strict HTML, JS and CSS parser.

 

On Line 43 in your codepen CSS panel you have a ending block quote  */  without the beginning block quote, that is probably causing that error

// scroll to the end of this code and see the */
background: linear-gradient(45deg, rgba(255,255,255,0) 22%,rgba(255,255,255,0.38) 25%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); */ 

:)

Link to comment
Share on other sites

Hmm,

 

i made the codepen demo, because first i saw it outside without codepen, and I get the error outside the console of codepen in my IE Debugger output.

Just to be sure - the white gradient is not moving at all in IE. In other browsers it is.

 

It says "File: tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js, row: 16, column: 2740"

"Invalid argument"

"Q.setAttribute("src",m)" -> is highlighted

Link to comment
Share on other sites

Have you tried to use the CDN version of TweenMax.min.js and see if you still see the error?

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Also I tried your example in MS Edge and started to see those errors. But I deleted your comments inside the .glow CSS rule and put your background CSS properties in the right order, and the errors went away.

 

See the Pen qaQwJR by jonathan (@jonathan) on CodePen

 

That looks like IE and MS Edge do not like all those block quotes inside that rule along with all that legacy gradient syntax.

 

I did a number of things to get it to work. Like i said IE / MS edge has a really strict CSS parser.

  1. I used the above TweenMax CDN TweenMax.min.js instead of the file you were using.
     
  2. I removed all the comment you had in the .glow rule since it was causing those errors in the console.
     
  3. The gradient syntax and order you were using is wrong in your CSS .glow rule. The background:red; and background-repeat:no-repeat; should be first since i believe the Microsoft browsers see that and background:red overrides your gradients. In CSS the fallback, in this case background:red; comes first so anything after it that is not supported will inherit the first background:red;. But you had that as the last CSS property so that was overriding the gradient.
     
  4. You were mixing the long-hand properties background-color:red and background-repeat: no-repeat with the short-hand background property that was overriding the rules since they were last inside your .glow rule
     
  5. The Microsoft browsers CSS parser is very strict so if you don't have the proper order of your CSS properties inside your CSS rules . Then your CSS wont get applied correctly.
     
  6. You were basically overriding your gradients with background-color:red

So it should be this with no comments and have your long-hand syntax before your short-hand syntax:

.glow {
  background-color: red;
  background-repeat: no-repeat;
  background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.38) 25%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.38) 25%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.38) 25%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
}

Technically gradients are applied to the background-image property for greater browser compatibility.

 

The short-hand background property can sometimes cause this type of behavior when mixing with long-hand individual background properties:

  • background-color
  • background-repeat
  • background-image
  • background-position
  • background-attachment

Resource:

CSS Cascading and Inheritance: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance

  • Like 1
Link to comment
Share on other sites

Jonathan,

 

you are my hero.

These cross-browser-hacks make my hair (more) grey ....

 

The Tweenmax version i used is an official hosted library from google for the Google Doubleclick Network (GDN), where i am developing tons of banners for, so the (counted) file-size will not increase.

 

See the hosted libraries - https://support.google.com/richmedia/answer/6307288?hl=en

 

Thank you again.

  • Like 1
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.
×
×
  • Create New...