css3 проблема перехода с chrome

Question

Я работаю над SVG, объект внутри SVG имеет простой стиль перехода, но он имеет проблему в хроме, и он разбивает объекты и не может показывать плавный переход.

У вас есть идея? я уже прочитал много поста, как этот, и ни один из них не помогает: http://www.sitepoint.com/fix-chrome-animation-flash-bug/

Этого стилю не меняет вопрос:

-webkit-backface-visibility: hidden; -webkit-transform: scale(1);

<pre> 
<style> 
.irwild:hover , .comwild:hover , .irstd:hover , .comstd:hover { 
transform: translate(-30px); 
-ms-transform: translate(-30px); 
-webkit-transform: translate(-30px);} 

.irwild , .comwild , .irstd , .comstd { 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility:  hidden; 
backface-visibility:  hidden; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out;} 
</style> 
</pre> 

Answer 1

если у вас есть использование анимации трудности -webkit-transform: translateZ (0); чтобы заставить хром использовать аппаратное ускорение.