SVG-анимация не работает правильно в Safari

Question

У меня проблема с Safari, когда я тестирую приведенный ниже код, однако анимация отлично работает в Chrome и Firefox.

HTML:

<div> 
    <svg width="100%" height="100%"> 
     <line class="top" x1="0" y1="0" x2="690" y2="0"></line> 
     <line class="left" x1="0" y1="230" x2="0" y2="-400"></line> 
     <line class="bottom" x1="230" y1="60" x2="-460" y2="60"></line> 
     <line class="right" x1="230" y1="0" x2="230" y2="690"></line> 
    </svg> 
</div> 

CSS:

div { 
    width: 230px; 
    height: 60px; 
    margin: 100px; 
    position: relative; 
} 
div svg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

div svg line { 
    stroke-width: 2; 
    stroke: #000; 
    fill: none; 
    stroke-dasharray: 230; 
    -webkit-transition: all .6s; 
    transition: transform .6s; 
} 
div:hover svg line.top { 
    -webkit-transform: translateX(-460px); 
    transform: translateX(-460px); 
} 
div:hover svg line.bottom { 
    -webkit-transform: translateX(460px); 
    transform: translateX(460px); 
} 
div:hover svg line.left { 
    -webkit-transform: translateY(330px); 
    transform: translateY(330px); 
} 
div:hover svg line.right { 
    -webkit-transform: translateY(-460px); 
    transform: translateY(-460px); 
} 

http://jsfiddle.net/e4frf6oa/2/

А вот как это выглядит в то время как MouseMove в Chrome и Safari.

Answer 1

На этой линии:

-webkit-transform: translateX(415px); 
     transform: translateX(460px); 

Вы задаете различные значения пикселей для -webkit-transform и transform. Причина, по которой Safari выглядит странно, заключается в том, что она использует определение -webkit-transform, тогда как большинство других браузеров используют определение transform. Чтобы исправить это, вам просто нужно изменить webkit, чтобы он также был 460px.