transizioni webkit che non funzionano in chrome e safari

Question

Ho problemi a ottenere una transizione per lavorare nei browser webkit, mentre funziona perfettamente in firefox. Il mio codice è sotto

HTML 
<div class="dropdown" data-id="new-houses"> 
<h3>New Houses</h3> 
<img src="/local/images/down-arrow.png" /> 
</div> 
<div id="new-houses" style="display:none;"> 
<!--content of div--> 
</div> 

CSS 
.dropdown{ 
    width:100%; 
    cursor:pointer; 
    height:50px; 
    clear:both; 
} 
.dropdown img{ 
    width:20px; 
    height:17px; 
    float:right; 
    margin-right:20px; 
    margin-top:17px; 
    -webkit-transition:transform 1s; 
    -moz-transition:transform 1s; 
    -ms-transition:transform 1s; 
    -o-transition:transform 1s; 
    transition:transform 1s; 
} 
.point_down{ 
    transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -ms-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
} 

jQuery 
$('.dropdown').click(function(){ 
    var self = $(this); 
    self.find('img').toggleClass('point_down'); 
    $('#'+self.attr('data-id')).slideToggle(1000); 
}); 

La trasformazione sta lavorando in FF, Safari e Chrome, ma la transizione funziona solo con FF. Ho provato a cambiare img sia inline-block che block, il che non ha fatto differenza. Qualcuno l'ha già incontrato prima o può vedere se c'è qualcosa di sbagliato nel mio codice? Qualsiasi aiuto tu possa offrire sarà molto apprezzato.

Answer 1

E '

-webkit-transition:-webkit-transform 1s;