CODEWITHSUNDEEP
htmlcsssvg
Sam Loya
Sam Loya

Reputation: 85

SVG border animation doesn't work correctly in Safari

I have an issue with Safari when I test the below code, however the animation works fine in Chrome and 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/

And here's how it looks while mousemove in Chrome and Safari.

Chrome

Safari

Upvotes: 2

Views: 337

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

On this line:

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

You specify different pixel values for -webkit-transform and transform. The reason why Safari looks weird is because it uses the -webkit-transform definition, whereas most other browsers use the transform definition. To fix this, you just need to change the webkit one to also be 460px.

Upvotes: 2

Related Questions