Неполная отрисовка в процедурной анимации SVG
Пример двигает окружность SVG влево-вправо. При движении, окружность не всегда отрисовывается полностью. Проверка делалась в FireFox/Ubuntu. Дефект виден не всегда, но проявляется часто. В Chrome/Ubuntu дефект не заметен.
Я понимаю что конкретно это движение можно сделать без JavaScript и всё будет работать. Но у меня задача двигать окружность по кривым, которые вычисляются на лету. Что сделать чтобы отрисовка всегда была корректной?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG animation issue</title>
<svg width="500" height="100" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50", cy="50", r="40" />
</svg>
<script>
const circle = document.getElementsByTagName('circle')[0];
const step = t => {
const x = 250 + 200 * Math.sin(t / 700);
circle.setAttribute('cx', x);
window.requestAnimationFrame(step);
};
window.requestAnimationFrame(step);
</script>
</head>
<body>
</body>
</html>