Przejścia na webkit nie działają w chrorze i safari

Question

Mam problemy z przejściem do pracy w przeglądarkach webkit, podczas gdy działa doskonale w firefox. Moje kodu jest poniżej

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); 
}); 

Transformacja działa w FF, Safari i Chrome, ale przejście działa tylko z FF. Próbowałem zmienić img na blok inline i block, co nie miało znaczenia. Czy ktoś wcześniej to napotkał, czy może zobaczyć, że coś jest nie tak z moim kodem? Każda pomoc, jaką możesz zaoferować, zostanie doceniona.

Answer 1

To

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