3

I've been working on an animation that shows a single GPS track being drawn from start to end.

The following works correctly on macOS chrome and safari, and android chrome.

When trying this on my iPad (safari, chrome, firefox), I see that the track is animated incorrectly, as it doesn't nicely go from start to end, but shows multiple starts halfway the track.

console.log('total path length is: ', document.getElementById("path").getTotalLength())
#path {
  stroke-dasharray: 714;
  stroke-dashoffset: 714;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg width="600" height="500">
  <g transform="translate(-200,-300)">
    <path stroke="black" fill="none" d="M583,313L587,317L589,319L590,322L590,324L589,327L589,329L589,332L588,334L588,337L587,340L587,343L587,346L586,348L585,351L585,353L584,356L584,359L583,361L583,364L582,367L582,369L582,372L581,374L581,377L580,379L579,382L579,385L578,388L577,390L577,392L578,395L577,398L576,400L576,404L576,406L576,409L576,412L576,414L576,417L576,420L576,423L576,425L577,428L577,431L577,434L577,436L578,439L578,442L578,444L578,447L578,449L579,452L579,454L580,457L581,460L581,463L582,465L582,468L583,470L584,473L585,475L587,478L588,481L589,484L590,487L591,490L593,492L592,494L593,497L591,498L588,498L585,499L582,499L579,500L577,500L574,500L571,501L569,501L566,502L563,502L561,503L558,502L555,502L553,502L550,502L547,502L545,501L542,500L539,500L536,500L534,500L531,500L527,500L525,500L522,500L519,501L517,502L514,502L511,503L509,504L506,505L503,505L501,506L497,507L496,508L494,511L493,514L491,516L490,518L488,521L486,523L485,525L483,527L482,529L479,532L478,534L476,536L475,538L473,541L472,543L470,546L468,548L467,550L466,553L464,556L462,558L461,560L459,562L457,564L456,567L454,569L452,571L450,573L449,576L447,578L445,580L444,582L442,584L440,586L439,589L438,591L436,593L435,596L434,598L433,600L431,602L430,605L429,607L428,609L427,612L425,614L424,616L422,619L421,621L420,624L419,626L418,628L417,631L416,633L414,635L413,638L412,640L411,642L410,645L409,647L408,650L407,653L406,655L405,658L404,660L403,662L402,665L401,667L400,670L399,672L397,675L396,677L394,680L393,682L392,685L391,687L390,690L389,692L388,694L387,696L385,699L384,701L382,703L381,706L379,708L378,710L377,712L376,715L374,717L372,719L371,722L370,724L368,726L367,728L365,731L363,733L361,735L359,736L357,738L355,739L353,741L351,743L349,745L347,747L345,749L342,751L340,753L338,754L336,754L334,752L333,750L331,748L329,745L328,743L326,741L324,739L322,737L321,735L319,732L317,730L315,728L313,726L311,724L310,722L308,720L307,718L305,716L304,713L302,710L301,708L300,705L299,703L299,700L298,697L298,694L297,692L297,689L296,686L295,684L294,682L292,679L291,677L290,674L288,672L286,670L284,668L282,666L281,664L279,662L277,660L276,658L273,656" id="path" stroke-width="5px">
    </path>
  </g>
</svg>

Any ideas on how to counter this behaviour?

SanderDN
  • 496
  • 6
  • 19
  • I'm not sure if iOS is a bit sensitive to svg markup being absolutely bang on, I can't replicate the issue in my device console, can you try this on your device browsers https://gist.github.com/joshmoto/c44808c2ddafec4b1adbd1e8f60862d7 – joshmoto Oct 27 '20 at 22:26
  • Same wrong behaviour: https://i.stack.imgur.com/x2CjC.gif – SanderDN Oct 27 '20 at 22:40
  • https://dev.joshmoto.wtf/scratches/stroke.html on my iphone 5 in safari this works – joshmoto Oct 27 '20 at 22:46
  • https://photos.app.goo.gl/gVWrKC24NsJ4ACTn8 on ipad safari – joshmoto Oct 27 '20 at 22:58
  • Then maybe it's only iPad? I'm using an iPad Pro with 14.1 iOS, and that consistently shows this problem for me, also for the link you shared. – SanderDN Oct 27 '20 at 22:58
  • The video link i sent you (above) is of my ipad which is an ipad air 2 software version 13.7 – joshmoto Oct 27 '20 at 23:01
  • What about this, could it really be retina related? https://gist.github.com/joshmoto/d2a3a390b6a7720a2497c31b949cc917 and online live demo https://dev.joshmoto.wtf/scratches/stroke.html - though this does not work on my ipad as everything is scaled up – joshmoto Oct 27 '20 at 23:21
  • `` have you tried this? – joshmoto Oct 27 '20 at 23:26

1 Answers1

3

I will try to assume that a large number of nodal points in places of a sharp change in the direction of the line is interpreted by some OS as a line break and the presence of not one line, but several

Therefore, the animation of the line, judging by your link, starts in several places at once

enter image description here

I redrawn the line in a vector editor with fewer node points
Try this line option on your gadget

#path {
  stroke-dasharray: 675;
  stroke-dashoffset: 675;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="500" version="1.1">
  <path id="path" d="m379 18.7 4.1 5.6-13.1 64-1.1 23.6 1.5 29.6 3.7 22.5 5.6 16.9 4.5 10.5-28.1 3.7-23.2-1.9-17.6 0.4-23.2 7.5-28.9 40.5-26.4 36.9-21.1 35.6-9.2 22.1-15.4 33.9-15.9 29.7-13.2 22.2-10.1 9.5-14.8 13.2-28.6-37.6-4.2-19.1L93.2 368.1 77.9 350.6" style="fill:none;stroke-width:5;stroke:black"/>
</svg>
<script>
console.log('total path length is: ', document.getElementById("path").getTotalLength());
</script>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54