Jump to content
Technics1210

Linear gradient IE Bug / CSS TweenMax

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

Share this post


Link to post
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%); */ 

:)

Share this post


Link to post
Share on other sites

Hi Joanthan,

 

sorry I forgot to close the comments correct while debugging. BUT -> even when I correct this, there is the error persistent.

 

Please check again in IE

 

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

Share this post


Link to post
Share on other sites

Im not seeing this error in the console. Have you tried testing this outside of codepen?

 

Maybe others in the forum can see what your seeing. Codepen is known to  throw errors so its best to test outside it to narrow down your issue.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Great detective work, Jonathan!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.