Linear gradient problem

[Lasercode 11 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

Remove the semi-colon...

TweenMax.set( '#lol-box', { background: "linear-gradient( to right, #fff 0%, #000 100% )" });

[Lasercode 11 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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

 

[ohem 324 Likes (Leader)]

Is the webkit prefix still needed?  CSS gradients have been supported unprefixed since Chrome 26 (2011) and Safari 6.1 (2012).

 

http://caniuse.com/#feat=css-gradients

[Jonathan 5,176 Likes (Superhero)]

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

 

[ohem 324 Likes (Leader)]

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.

[Jonathan 5,176 Likes (Superhero)]

Safari might need the legacy old way of linear-gradient