svg animation not displaying properly in Chrome - html

Question

I've created a CSS SVG animation of a frame being drawn onto the stage. The animation works correctly, but there seems to be an issue mostly in Chrome. The stage should be blank before the animation begins and the frame, made up of 4 segments, "draws" in segment by segment. In some versions of Chrome, however, before the animation begins there are 4 dots on the stage. The dots are the beginning points of each segment of the frame and shouldn't be visible.
In a few versions of Chrome that I've tested it on (47.0.2526.106 on a Mac, 47.0.2526.83 on an Android phone, and 43.0.2357.130 for Windows), the dots are visible. In older versions of Chrome (43.0.2357.130 for Mac, for example) and in Safari and Firefox the dots are not visible. Has anyone else encountered a similar issue? Any help will be appreciated.
Here is a working example in a jsfiddle.
Here is the HTML:
<div id="mainContainer">
<div id="bottomLeftPosition">
<svg><path class="pathBottomLeft framePath" d="M127.504,105.451
c1.394-0.461,0.629-2.404,0.735-3.859c0.047-0.719,0.826-1.225,0.368-2.021c-0.338-0.598-1.333-0.398-2.39-0.735
c-1.424-0.442-1.931-1.087-3.493-0.735c-2.143,0.475-7.396,4.611-8.453,6.25c-0.674,1.041-1.501,3.322-1.471,4.227
c0.045,1.363,2.036,4.655,2.573,5.146c2.036,1.852,6.769,2.986,10.107,2.389c1.715-0.307,2.97-1.578,4.593-1.654
c2.084-2.389,4.381-4.564,6.066-7.352l0.887-5.713l-1.071-5.314c-1.286-3.615-4.104-5.696-6.064-8.637
c-1.579-0.965-3.461-1.058-5.147-1.84c-0.75-0.352-1.254-1.148-2.021-1.47c-1.775-0.735-3.98-0.245-5.696-1.47
c-7.427-0.858-13.187,0.994-19.665,2.021c-14.793,5.359-29.726,12.865-42.453,20.766c-1.011,0.628-2.022,1.426-3.125,2.021
c-1.93,1.043-3.293,1.533-5.697,2.389c-1.256,0.445-2.39,1.38-3.492,1.654c-4.642,1.166-9.604-1.285-12.498-4.225
c-0.934-2.758-2.573-5.451-2.389-9.926c0.077-1.852,1.01-3.538,0.551-5.329c3.186-8.179,6.616-16.249,11.578-23.708
c0.415-0.627,1.226-1.041,1.655-1.654c0.643-0.934,0.872-2.266,1.47-3.307c0.551-0.98,1.547-1.7,2.022-2.573
c1.592-2.911,2.389-7.168,2.94-10.66c0.245-1.547-0.261-2.925-0.368-4.595c-0.092-1.409,0.23-2.879,0.185-4.411
c-0.092-3.768-0.766-8.071-1.287-11.946c-0.291-2.145-0.26-4.84-1.103-6.8c-1.057-2.466-3.277-3.538-4.594-6.065
c-2.251-0.75-4.519-1.485-6.433-2.572L29.73,14.11c-2.634,0.214-3.967,1.777-6.065,2.94C21,20.665,13.879,30.804,18.152,35.98
c2.205,2.665,4.456,6.249,8.821,4.228c0.583-2.144,4.028-3.905,5.513-6.616c0.199-0.368,0.153-1.011,0.368-1.471
c0.367-0.75,0.995-1.24,1.103-1.837c0.062-0.367-0.336-3.89-0.551-4.595c-0.75-2.542-3.706-2.036-4.594,0"/></svg>
</div>
<div id="topLeftPosition">
<svg><path class="pathTopLeft framePath" d=
"M29.638,109.531c1.792-2.664,3.92-8.469,1.838-12.13c-0.75-0.123-1.087-0.55-1.654-0.919c-1.118-0.703-1.731-1.071-2.94-1.654
c-1.348-0.643-0.919-0.489-2.573-0.551c-1.976-0.062-2.665,0.443-4.043,1.654c-2.604,2.297-5.146,5.514-5.513,9.373
c-0.705,7.458,4.717,12.42,9.924,14.702c0,0,2.281,0.2,2.343,0.214c0.138,0,2.251-0.582,2.251-0.582
c1.93-0.918,3.094-2.449,4.595-3.857c1.057-0.981,2.22-1.303,3.124-2.572c0.521-0.736,1.011-1.824,1.654-2.758
c0.583-0.857,1.486-1.73,1.838-2.389c0.384-0.719,0.245-1.593,0.552-2.572c0.275-0.857,1.042-1.762,1.286-2.573
c0.903-2.972,0.659-7.366,0.552-10.292c-0.261-7.488-2.405-13.509-4.778-19.481c-0.751-1.915-2.083-3.476-2.941-5.33
c-0.628-1.362-1.087-2.817-1.838-4.226c-0.95-1.792-2.359-2.772-2.573-5.146c-2.374-3.553-3.584-7.903-4.962-12.129
c-0.475-1.456-1.287-3.064-1.471-5.513c-0.367-4.992,1.976-9.327,3.86-13.417c1.271-2.772,2.71-5.252,4.41-6.799
c5.989-5.438,16.847-8.333,26.648-8.088c4.794,0.123,9.909,0.581,14.152,2.021c1.486,0.506,3.032,1.286,4.595,1.837
c1.593,0.552,3.384,0.98,4.779,1.654c1.838,0.889,3.553,2.39,5.329,3.492c3.095,1.915,5.667,3.048,8.086,5.331
c2.543,2.404,4.442,5.482,6.802,7.902c2.557,2.635,5.713,4.012,8.453,6.249c2.863,0.812,5.729,1.624,7.902,3.124
c11.579,2.635,21.748-2.113,25.729-9.924c0,0,1.47-9.266,0.919-11.548c0.046-0.72-1.103-4.809-1.103-4.809
c-1.424-2.374-2.895-4.028-5.022-5.698c-0.949-0.827-3.568-2.803-6.785-1.179c-2.955,2.144-5.851,7.596-2.298,11.026
c2.358,2.268,6.311,1.731,9.558,2.206"/></svg>
</div>
<div id="topRightPosition">
<svg><path class="pathTopRight framePath" d="M25.065,32.641
c0,0,4.334-2.696,4.518-2.833c2.696-1.869,5.728-2.864,6.065-6.616c-0.995-7.259-8.883-7.32-12.772-4.15
c-2.849,2.312-5.391,7.473-5.391,12.512c0,2.021-0.015,5.223,0.919,7.352c0.674,1.532,2.925,3.706,4.962,4.411
c0.719,0.246,1.776,0.124,2.572,0.368c1.761,0.536,2.451,1.363,5.33,1.103c6.371-0.567,12.023-1.516,17.827-2.94
c1.257-0.307,2.052-0.842,3.309-1.287c1.593-0.582,3.385-0.582,4.963-1.103c2.894-0.965,5.773-2.375,8.637-3.492
c3.033-1.179,6.126-2.205,9.005-3.492c6.294-2.818,12.649-7.03,19.113-9.557c2.528-0.995,5.054-1.562,7.167-3.124
c0.675,0.061,1.195-0.031,1.654-0.184c4.624-2.926,12.865-3.645,19.113-3.676c1.041,0.612,2.129,1.179,3.676,1.286
c3.047,2.007,6.77,4.793,8.637,8.822c1.656,3.553,2.145,7.888,2.574,12.314c0.229,2.451-0.385,5.314-0.367,7.903
c0.107,13.768-7.704,24.688-11.763,35.653c-2.466,2.236-2.772,5.896-4.593,9.924c-0.322,0.721-0.995,1.286-1.287,2.021
c-2.344,5.881-3.83,15.408-0.185,20.217c1.685,2.221,7.169,4.977,10.661,3.859c2.268-0.72,3.521-2.543,5.145-4.41
c0.245-6.005-2.387-9.129-5.879-11.396c-1.104,0.309-1.93-0.211-2.757,0.369c-0.49,0.703-0.124,1.393-0.185,2.389"/></svg>
</div>
<div id="bottomRightPosition">
<svg><path class="pathBottomRight framePath" d="
M133.236,18.858c0.106,1.517-3.018,6.448,0.184,7.168c1.256,0.275,3.782-1.087,4.962-1.838c2.757-1.761,4.228-5.773,4.779-8.271
c-0.981-2.189-2.282-4.793-4.595-5.88c-3.645-1.716-8.867-0.153-11.027,2.205c-2.45,2.68-4.41,7.979-4.778,13.049
c-0.291,4.088,0.95,6.371,3.308,8.454c1.961,1.746,4.61,2.788,6.618,4.595c0.153,0.138,0.353,0.521,0.55,0.735
c2.007,2.159,3.507,4.441,4.963,7.536c0.658,1.393,1.026,5.575,1.471,7.657c0.628,2.91,1.623,6.264,1.838,9.005
c0.904,11.777-0.154,23.968-6.8,31.611c-1.731,1.163-3.309,2.647-5.147,3.858c-1.699,1.103-3.415,2.634-5.329,3.492
c-0.873,0.382-2.006,0.382-2.94,0.733c-5.238,1.962-11.104,2.59-17.828,3.31c-4.762,0.521-8.898,0.949-14.52,1.103
c-4.746,0.123-9.158,1.103-12.864-0.184c-3.69-0.153-6.708-2.129-10.475-2.205c-2.328-1.348-5.452-2.465-8.086-2.94
c-1.731-1.808-5.299-1.257-7.167-2.206c-0.888-0.153-0.659,0.812-1.654,0.552c-1.501-0.644-3.033-1.257-4.779-1.654
c-0.627-0.169-0.536-1.058-1.103-1.286c-2.971-0.904-4.961-3.554-7.718-4.596c-0.384-0.137-0.98,0.123-1.471,0
c-0.949-0.229-1.898-1.147-2.756-1.285c-9.802-1.517-18.486,8.055-16.54,17.09c0.321,1.486,0.413,3.493,2.052,5.897
c3.752,4.364,7.918,1.716,10.66-1.286c1.47-1.609,3.614-8.729,0.276-9.006c-2.85-0.23-5.391,3.338-5.882,3.491"/></svg>
</div>
<div id="border"></div>
</div>
And the CSS:
body {
margin:0;
padding:0;
}
#mainContainer{
position: relative;
width: 300px;
height: 600px;
overflow: hidden;
background-color: #fff;
}
#border{
position:absolute;
width:298px;
height:598px;
border:solid 1px #000;
}
#bottomLeftPosition{
position:absolute;
left:5px;
top:231px;
}
#topLeftPosition{
position:absolute;
left:9px;
top:123px;
}
#topRightPosition{
position:absolute;
left:140px;
top:116px;
}
#bottomRightPosition{
position:absolute;
left:130px;
top:226px;
}
.framePath {
width:160px;
height:130px;
fill:none;
stroke:#000;
stroke-width:3;
stroke-linecap:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.pathBottomLeft {
animation: dash 1.7s linear 1.5s forwards;
-webkit-animation: dash 1.7s linear 1.5s forwards;
-moz-animation: dash 1.7s linear 1.5s forwards;
}
.pathTopLeft {
animation: dash 1.7s linear 2.2s forwards;
-webkit-animation: dash 1.7s linear 2.2s forwards;
-moz-animation: dash 1.7s linear 2.2s forwards;
}
.pathTopRight {
animation: dash 1.7s linear 2.9s forwards;
-webkit-animation: dash 1.7s linear 2.9s forwards;
-moz-animation: dash 1.7s linear 2.9s forwards;
}
.pathBottomRight {
animation: dash 1.7s linear 3.5s forwards;
-webkit-animation: dash 1.7s linear 3.5s forwards;
-moz-animation: dash 1.7s linear 3.5s forwards;
}
#keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}

Answer 1

I don't necessarily think this is a bug, but it should certainly be fixed. Because there is a line with what seems to be a length of 0, you'd think it'd be invisible. But in these builds of Chrome, a line with a length of 0 and a positive stroke-width, will render. Just like how the browser will still render a div when it has been given a height of 0 but also a border thicker than 0.
If you want to solve the issue, You can add something like visibility: hidden; or opacity: 0; to .framePath, and then add the opposite to the animation (at 0% and 100%)