Support cross-browser Flexbox

[usheeen 6 Likes (Newbie)]

Flexbox is the modern way to lay out an interface, however it still needs vendor prefixes. At the moment I'm using:

TweenMax.set(element, {
  display: "-webkit-flex"
});

... which supports Chrome, Safari and iOS, it would be great to have this work for all browsers by display: "flex".

 

Why don't I just do this in CSS you ask - I have a couple of plugins heavily utilizing Greensock (think carousels, tabs, etc.) that I need to be JS only, so defining the essential structural styles in code is necessary. For me flexbox is the best and cleanest way to layout a carousel or sliding tab content (using Draggable).

 

I imagine the infrastructure is there to accommodate this essential CSS property. It would be a great addition to your CSSPlugin.

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

I had no idea you needed to prefix flexbox properties with GSAP. I tried animating some flexbox stuff in the past, and couldn't get it to work, so I ended up using CSS transitions instead 

[usheeen 6 Likes (Newbie)]

Check out this pen:

See the Pen LVypKX by oisinlavery (@oisinlavery) on CodePen

 

Safari is the only modern browser that requires prefixing: http://caniuse.com/#search=flexbox

 

Of course we can't do multiple prefixes so best case scenario is to include -webkit- and have it work in Chrome and Safari. 

However this will prevent it from working in the non webkit browsers, it also feels weird adding a vendor prefix to TweenMax config, I expect it to do the hard work

[GreenSock 8,117 Likes (Superhero)]

This is an odd one indeed because it's not the property name itself that needs the prefixing (like "-webkit-transform"), but it's the value. Does anyone know a good (and low-kb) way to feature-detect this? I do NOT want to add a bunch of conditional logic that has hard-coded browser names and version numbers just for this edge case, especially because we don't know exactly what version number it'll be when -webkit- is deprecated. Yuck. 

[usheeen 6 Likes (Newbie)]

You're right it is kind of a special case, but a very important one

 

Here are some relevant Stack Overflow solutions:

 - http://stackoverflow.com/questions/17896846/set-display-property-flex-on-element-cross-browser#answer-17897282

 - http://stackoverflow.com/questions/21819801/setting-flexbox-display-with-jquery-for-multiple-browsers/#answer-24706195

[Diaco 1,948 Likes (Superhero)]

Hi Guys

 

for now how about this :

var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';


safari = function() {return /safari/i.test(userAgent) && /apple computer/i.test(vendor);};
ios = function() {return /iphone/i.test(userAgent) || /ipad/i.test(userAgent) };


TweenMax.set(".items",{display:( safari() || ios() ) ? "-webkit-flex" : "flex"});

[usheeen 6 Likes (Newbie)]

Hey Diaco, this is indeed a solution but I think this should be supported by TweenMax itself.

[GreenSock 8,117 Likes (Superhero)]

No no, that's exactly the kind of thing I do **NOT** want to put into GSAP because it has hard-coded logic to always use -webkit-flex for Safari. What happens if in 3 months, they drop the prefix? Then GSAP "breaks". See what I mean? '

 

I was asking about a way to feature-detect rather than user agent sniffing which is generally frowned-upon. usheeen, I see that there are some ideas in the stackoverflow world. I'll consider those. I'm a tad apprehensive about it right now due to the kb cost and how few people use an animation engine to set the "display" property on elements. 

[Diaco 1,948 Likes (Superhero)]

Jack is Completely right as always : https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW27

[usheeen 6 Likes (Newbie)]

Well thanks for considering Carl.

 

I do just think that Flexbox is with us to stay but maybe Greensock should just wait it out until vendor prefixing has been dropped.

 

Until then, this is a fine solution:

$(elem).attr('style', 'display: -webkit-flex; display: flex');