Jump to content

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

Support cross-browser Flexbox

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.