javascript buttons + css transition flicker on safari
<p>I have a button set like this, controlled by javascript and trigger  css transition, I tried to duplicate the problem into some more simplify situation , but the flickering just won't happen, but only happen on this button set, the problem might not be even inside this code, or it might be.</p>

<p>The output is, when mouse over the button, it flickers for 0.5 second on webkit browser, if put <code>border:2px solid red</code> on the buttons, the background size will not be 100% anymore, looks buggy
I've tried putting : </p>

<pre><code>-webkit-backface-visibility: hidden;
-webkit-transform      : translateZ(0); 
-webkit-transform      : translate3d(0,0,0);    
-webkit-perspective:1000;
</code></pre>

<p>All helpless.. Did I do anything wrongly?</p>

<pre><code> var btns = {
         'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
         'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
         '$all_btn' : $('.all_btn'),
         '$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
         'folders_status':['inactive','inactive','inactive','inactive'],
         'timer':null
         ,jquery_func : function(){
            btns.$all_btn.each(function(){

                $(this).click(function(){
                    if($(this).attr('id')=='service_btn1'){
                        ajax1();
                    }

                    if($(this).attr('id')=='service_btn3'){
                        ajax3();
                    }
                    var imageurl_o = new Array();

                    for(i=0;i&lt;4;i++){
                        imageurl_o[i] = {'background':'url('+btns.bg_o[i]+')','background-size':'100% 100%'};       
                        btns.$folders[i].css(imageurl_o[i]);    
                        btns.folders_status[i]='inactive';
                    }

                    for(i=0;i&lt;4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).attr('class') == myparent.attr('class')){
                            var imageurl_h = {'background':'url('+btns.bg_h[i]+')','background-size':'100% 100%'};
                            btns.$folders[i].css(imageurl_h);   
                            btns.folders_status[i]='active';
                        }   
                    }
                });


                $(this).on('mouseenter',function(){
                    console.log('out')
                    var imageurl_o = new Array();

                    for(i=0;i&lt;4;i++){
                        imageurl_o[i] = {'background':'url('+btns.bg_o[i]+')','background-size':'100% 100%'};
                    }
                    for(i=0;i&lt;4;i++){
                        if(btns.folders_status[i]=='inactive'){
                            btns.$folders[i].css(imageurl_o[i]);
                        }
                    }


                    clearTimeout(btns.timer);
                    var imageurl_h = null;
                    var go = null;
                    for(i=0;i&lt;4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).is(':visible')&amp;&amp;$(this).attr('class') == myparent.attr('class')){
                            $(this).stop(true);
                                imageurl_h = {'background':'url('+btns.bg_h[i]+')','background-size':'100% 100%'};
                                go=imageurl_h;
                                if(imageurl_h!=null &amp;&amp; go!=null){
                                    btns.$folders[i].css(go);   
                                    btns.$folders[i].css(go);   
                                    btns.$folders[i].css(go);   

                                }
                        }   
                    }

                    btns.timer = setTimeout(function(){
                        var imageurl_o = new Array();
                        for(i=0;i&lt;4;i++){
                            imageurl_o[i] = {'background':'url('+btns.bg_o[i]+')','background-size':'100% 100%'};
                        }
                        for(i=0;i&lt;4;i++){

                            if(btns.folders_status[i]=='inactive')
                            btns.$folders[i].css(imageurl_o[i]);
                        }
                    },1000);


                });


            }); 
         }
     }
     btns.jquery_func();
</code></pre>
