Jump to content
GreenSock

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

Linear gradient problem

Recommended Posts

Hey folks.

I got a rather simple problem. Please check out the code pen. Run it and then comment out the JS and comment in the CSS.

What do I do wrong?

Thanks.

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

Link to post
Share on other sites

Remove the semi-colon...

TweenMax.set( '#lol-box', { background: "linear-gradient( to right, #fff 0%, #000 100% )" });
  • Like 2
Link to post
Share on other sites

Facepalm... Thanks bro. Never would have thought about this..

Link to post
Share on other sites

Hello Lasercode,

 

To get it to work cross browser you have to include -webkit-linear-gradient for webkit based browsers due to Chrome not working without it anymore.

 

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

 

You have to either do a check for webkit based browsers inside your onUpdate:

// see codepen for what 'isChrome' equals
if(isChrome){
    TweenLite.set(element, {background:"-webkit-linear-gradient(top," + colors.top + ", " + colors.bottom + ")"});
} else {
    TweenLite.set(element, {background:"linear-gradient(to top," + colors.top + ", " + colors.bottom + ")"});
}

Or you have to include both set zero based tweens so it can apply to Chrome within the onUpdate:

TweenLite.set(element, {background:"-webkit-linear-gradient(top," + colors.top + ", " + colors.bottom + ")"});
TweenLite.set(element, {background:"linear-gradient(to top," + colors.top + ", " + colors.bottom + ")"});

Resources:

CSS linear-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

 

:)

Link to post
Share on other sites

Yes you still need it.. Chrome didn't need it in Chrome 26 .. but around Chrome 28-29 they changed syntax again and you needed it again.

 

Its best to use both if you want make sure it will always work while the Chrome Dev team makes up their mind..

 

Plus you want it to work for Android and iOS versions that require the -webkit prefix

 

You can see that this fork of my codepen does not work on latest Chrome on Windows 7 (64-bit) and Windows 11 (64-bit) with no webkit prefix

 

Test in Chrome.. you notice without webkit it does not work:

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

 

You can see in my various forum posts regarding CSS linear-gradients that I document Chrome changing what was supported. Carl can attest to this!

 

I have had to check it every month for 3 years since Chrome dev team keeps changing their implementation of CSS gradients. The same goes for CSS radial gradients.

 

Always test the browsers for yourself.. never trust canisue or compatibility charts when it comes to webkit.

 

Webkit based browsers always changes and they play the Mr. Potato game of adding, removing, add back, and remove again.

 

Working cross browser CSS linear gradient:

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

 

Working cross browser CSS radial gradient

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

 

Always test each browser for yourself ;)

 

:)

  • Like 2
Link to post
Share on other sites

Weirdly this one: 

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

 does not work in Chrome on my Mac.  The radial one works fine, though.

Link to post
Share on other sites

Safari might need the legacy old way of linear-gradient :)

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

×