Search the Community
Showing results for tags 'vendor prefix'.
Found 1 result
-
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...)
