Jump to content
GreenSock

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

Support cross-browser Flexbox

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

 

 

 

Link to comment
Share on other sites

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  :(

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

Link to comment
Share on other sites

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"});
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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');
  • Like 1
Link to comment
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.
×