Jump to content
GreenSock

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

Setting vendor prefixes in CSS value

Recommended Posts

Hi guys,

 

Coming back to this forum for some simple trouble !

 

I have a flexbox layout, which tweens in many ways, and through many efforts GSAP and flexbox work (almost) perfectly together !

 

Everything works fine in latest Chrome, Firefox and IE (well, some minor border-radius tweening trouble in IE, but... meh).

The troublemakers are Safari / Safari iOS / Chrome iOS and buddies, which still need vendor prefixes for flexboxes.

 

As pointed out in this topic, we can set() prefixes in CSS PROPERTIES this way :

tl.set($('#myDiv'), {css:{"-webkit-flex":0}});

But how about setting prefixes in a CSS property VALUE ?

I have tried things like :

tl.set('#myDiv', {css:{display:'-webkit-flex', display:'flex'}});

As I feared, it seems to be considered a duplicate by browsers.

Testing various situations, I think only the last instance of 'display' is applied, which seems only logical.

Depending on the order, I get my tweens to work on webkit-based browsers, or the others ;-)

 

So, the questions are :

- is there a way to set display right cross-browser ?

- is there a way to do it simply ? xD

 

Cheers to all the GSAP team, you're awesome !

 

================================================================================

 

EDIT :

 

While looking for an answer, I got to : this stackoverflow topic

 

Based on the answers there, I got some workarounds with no tweens : toggling an HTML "flexBox" class with jQuery for instance.

.flexBox {
    display: -webkit-flex;
    display:  -ms-flexbox;
    display:         flex;
}
function addClassFlex(elem) {
    elem.addClass('flexBox');
}

tl.set('#myDiv', {onComplete:addClassFlex, onCompleteParams:[$('#myDiv')]});

Since I need this to happen at a precise point of my timeline, I got nothing better than this callback yet.

Does it sound ok to you guys ? Anything better to propose ? (awful use of callbacks, and I dislike messing with styles in the HTML...)

Link to post
Share on other sites

Sure, you could do that. But I wouldn't do a set() - it should be a simple call() instead:

tl.call(addClassFlex, [$("#myDiv")]);

Or you could do a className set so that it works backwards and forwards in the timeline:

tl.set("#myDiv", {className:"+=flexBox"});

Do either of these work okay for you? 

Link to post
Share on other sites

Hi Jack,

 

Yep, both work fine in cleaning my code (still learning GSAP, should've thought of call() at least !).

 

No better solution to provide than this class "flexBox" for the initial problem, I guess ? ;-)

 

Thx a lot !

Link to post
Share on other sites

I can't think of a better solution right now, no :)

Link to post
Share on other sites

Yup, thought so. Doesn't belong to GSAP's playground to begin with !

 

Thx a lot for your help, everything works fine now !

Link to post
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.

×