[CB-11060] SVG stroke-dashoffset animation not working

• Type: Bug
• Status: Closed
• Priority: Minor
• Resolution: Won't Fix
• Affects Version/s: 6.1.0
• Component/s: cordova-android
• Labels: animation css svg triaged

Environment

Android

• Assignee: Unassigned
• Reporter: Jacques Cornat
• Created: 10/Apr/16 11:00
• Updated: 11/Apr/16 21:15
• Resolved: 11/Apr/16 21:15

Description

Hello everyone, I am having an issue with my svg animation in Cordova (Version 6.0.0) : dashes are not displayed on my Android (the circle is full).

Behavior on my Android 5.0 :

The strange thing is it works on my inspector :

Here a demo, if you want.

Here is the HTML :

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

Here is the CSS :

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    stroke: #4285F4;
    -webkit-animation: dash 1.4s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite;
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
    }
    100% {
        stroke-dashoffset: 187;
    }
}
@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
    }
    100% {
        stroke-dashoffset: 187;
    }
}

I have tried to put :

• negative value, like :

  stroke-dasharray: -187;

• percent value, like :

  stroke-dasharray: 50%;

  but it doesn't work.

I have been thinking it was maybe a Cordova problem... Thank you for the help !