Missing Vendor Prefixes

[rhoffmann]

I'm using GSAP to tween a few objects from { flex: 0 } to { flex: whatever }.

 

I'm well aware that flex is still in flux, but hey ... I live dangerously.

 

This works flawlessly on modern desktop browsers, but fails on mobile safari. It looks like mobile safari (latest version) still requires the -webkit- prefix.

 

From what I understand, the GSAP CSS plugin should handle vendor prefixes, but it looks like it's skipping over this one.

 

Is there a way I can specify the prefix in the meantime?

 

Edit: Added pen, click "Grow/Shrink" to make the magic happen.

See the Pen xbbdby by rjhoffmann (@rjhoffmann) on CodePen

[Jonathan]

Hello rhoffmann, and Welcome to the GreenSock Forum!

 

You should be able to do something like this.. wrapping your property in quotes "-webkit-flex":

// using your timeline instance
tl.set($('.blue'), {css:{"-webkit-flex":0}});

// or using TweenLite
TweenLite.set($('.blue'), {css:{"-webkit-flex":0}});

:

Check out the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Does that help?

[rhoffmann]

Hello rhoffmann, and Welcome to the GreenSock Forum!

 

You should be able to do something like this.. wrapping your property in quotes "-webkit-flex":

// using your timeline instance
tl.set($('.blue'), {css:{"-webkit-flex":0}});

// or using TweenLite
TweenLite.set($('.blue'), {css:{"-webkit-flex":0}});

:

Check out the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Does that help?

 

That appears to do the trick, thanks!

 

Can I expect automagic flex vendor prefixes to show up eventually?

[Jonathan]

I will notify GreenSock about the CSS flex property and the -webkit prefix for Safari and IOS Safari .. Thanks for letting us know!

 

Happy Tweening!

[klon]

Hello rhoffmann, and Welcome to the GreenSock Forum!

 

You should be able to do something like this.. wrapping your property in quotes "-webkit-flex":

// using your timeline instance
tl.set($('.blue'), {css:{"-webkit-flex":0}});

// or using TweenLite
TweenLite.set($('.blue'), {css:{"-webkit-flex":0}});

:

Check out the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Does that help?

 

Thanks for asking.

Thanks for answering.

Love GSAP more and more each day.