UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0

Steps to reproduce the problem:
1. run below svg, you will see five balls move along with one path
2. in a few minutes, the first ball stops, then other balls will stop one by one

<svg fill="#435063" viewBox="0 0 64 64">
  <g>
    <path d="m-40,0 q-8, -7, 0, -15 l40, 0 l0,15"
          stroke="#529fd9" stroke-width="1" fill="none" id="route1"></path>
    <path d="m0,0 l-40, 0" stroke="#529fd9" stroke-width="1" fill="none" id="route2"></path>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="a1" dur="1.6s" begin="0s;a1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="a1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="a1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="a1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="b1" dur="1.6s" begin="0.4s;b1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="b1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="b1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="b1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="c1" dur="1.6s" begin="0.8s;c1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="c1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="c1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="c1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="d1" dur="1.6s" begin="1.2s;d1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="d1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="d1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="d1.end+0.05s" dur="0.32s"
            />
    </ellipse>
    <ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
      <animateMotion id="e1" dur="1.6s" begin="1.6s;e1.end+0.4s">
        <mpath xlink:href="#route2"></mpath>
      </animateMotion>
      <animateMotion dur="0.39s" begin="e1.end">
        <mpath xlink:href="#route1"></mpath>
      </animateMotion>
      <animate
             attributeName="ry"
             values="3;2;2;2;3"
             begin="e1.end+0.05s" dur="0.32s"
            />
      <animate
             attributeName="rx"
             values="3;5;5;5;3"
             begin="e1.end+0.05s" dur="0.32s"
            />
    </ellipse>
  </g>
</svg>

What is the expected behavior?
Already tested the svg in firefox, the animations keep runing well (at least 5 hours)

What went wrong?
svg animations doesn't run as expected

Did this work before? N/A 

Chrome version: <Copy from: 'about:version'>  Channel: stable
OS Version: 10.0
Flash Version: 

This is the link I posted at StackOverFlow.
https://stackoverflow.com/questions/49677597/svg-animation-unexpectedly-stop-in-a-few-minutes