looping SVG dasharray inconsistent in Safari - workarounds?

Question

I'm going for a seamless loop using a combination of apath-dasharray and pathdashoffset

I have a path length of 16.568147659301758 which is reported by both safari and chrome yet the animations between browsers loop differently.

Even when pathLength="1" is set on the <path> (now supported by modern safari). I still get inconsistency.

Is there any way to abstract or get around the divergence in behaviour? I'm sure many graphing libraries have had to solve for this in some way.

codepen with pathLength="1" here

codepen using defined 16.568147659301758 here

// not needed 
// just to see
//  
// 16.568147659301758

var path = document.querySelector("svg path");
var total = path.getTotalLength();
console.log(total);

@keyframes ldmv{100%{stroke-dashoffset: 16.568147659301758}}
.mkldr{
stroke-dasharray: 2.5 13.06814765930175 ;
animation: ldmv 3s linear infinite;}


/* uncomment below if using   pathLength="1" on the <path */

/* 
@keyframes ldmv{100%{stroke-dashoffset: 1}}
.mkldr{
stroke-dasharray: .1 .9;
animation: ldmv 3s linear infinite;} 
*/

<svg width="256" height="256"
class="mkldr"
viewbox="0 0 6 5"
stroke="currentcolor"
fill="none"
stroke-linecap="butt"
stroke-width=".6">
<!-- no   pathLength="1" below -->
<path 
  id="mkldr" 
  d="m .5 2 
  a 1 1 0 0 1 2 0 l 0 1 
  a 1 1 0 0 0 2 0 l 0 -1 
  a 1 1 0 0 0 -2 0 l 0 1 
  a 1 1 0 0 1 -2 0 z" />
<use  
  xlink:href="#mkldr"  
  transform="
  scale(1,-1) 
  translate(1, -5)"/>