SVG SMIL animation rips to repeat in Safari

Question

I use SMIL for animation and javascript to add / remove a class and trigger a switch.

Everything works fine in Chrome, but it falls apart in Safari. The animation works in Safari the first time it switches, but then it breaks, only selecting some parts of the animation.

Codepen link here: http://codepen.io/matthewcpaul/pen/EaqmpE

Any help would be greatly appreciated!

var burgerMenu = document.querySelector(".ibmburger"); burgerMenu.onclick = function() { if (burgerMenu.classList.contains("close")) { document.getElementById("close-menu").beginElement(); burgerMenu.classList.remove("close"); } else { document.getElementById("open-menu").beginElement(); burgerMenu.classList.add("close"); } } 

 .ibmburger { position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px; background: #734098; cursor: pointer; } 

 <svg class="ibmburger" id="svg-all" width="64" height="64" viewbox="-50 0 200 200"> <path id="top-line" fill="transparent" stroke="#ffffff" stroke-width="8" stroke-miterlimit="100" d="M 0,70 C 50,70 50,70 100,70"> <animate xlink:href="#top-line" attributeName="d" from="M 0,70 C 50,70 50,70 100,70" to="M 0,100 C 0,34.3 100,34.3 100,100" dur="250ms" begin="indefinite" calcMode="spline" keyTimes="0;1" keySplines=".5 .1 .3 1" fill="freeze" id="open-menu"></animate> <animate xlink:href="#top-line" attributeName="stroke-width" from="8" to="4" dur="200ms" begin="open-menu.begin + 50ms" fill="freeze"</animate> <animate xlink:href="#top-line" attributeName="d" from="M 0,100 C 0,34.3 100,34.3 100,100" to="M 0,70 C 50,70 50,70 100,70" dur="250ms" begin="indefinite" calcMode="spline" keyTimes="0;1" keySplines=".5 .1 .3 1" fill="freeze" id="close-menu"</animate> <animate xlink:href="#top-line" attributeName="stroke-width" from="4" to="8" dur="200ms" begin="close-menu.begin + 50ms" fill="freeze"</animate> </path> <path id="bot-line" fill="transparent" stroke="#ffffff" stroke-width="8" stroke-miterlimit="100" d="M 0,130 C 50,130 50,130 100,130"> <animate xlink:href="#bot-line" attributeName="d" from="M 0,130 C 50,130 50,130 100,130" to="M 0,100 C 0,165.7 100,165.7 100,100" dur="250ms" begin="open-menu.begin + 0ms" calcMode="spline" keyTimes="0;1" keySplines=".5 .1 .3 1" fill="freeze"</animate> <animate xlink:href="#bot-line" attributeName="stroke-width" from="8" to="4" dur="200ms" begin="open-menu.begin + 50ms" fill="freeze"</animate> <animate xlink:href="#bot-line" attributeName="d" from="M 0,100 C 0,165.7 100,165.7 100,100" to="M 0,130 C 50,130 50,130 100,130" dur="250ms" begin="close-menu.begin + 0ms" calcMode="spline" keyTimes="0;1" keySplines=".5 .1 .3 1" fill="freeze"</animate> <animate xlink:href="#bot-line" attributeName="stroke-width" from="4" to="8" dur="200ms" begin="close-menu.begin + 50ms" fill="freeze"</animate> </path> <path id="middle-1" fill="transparent" stroke="#ffffff" stroke-width="8" stroke-miterlimit="100" d="M 0,100 C 50,100 50,100 100,100" transform="rotate(0 0 0)"> <animate xlink:href="#middle-1" attributeName="d" from="M 0,100 C 50,100 50,100 100,100" to="M 25,100 C 50,100 50,100 75,100" dur="100ms" begin="open-menu.begin + 0ms" calcMode="spline" keyTimes="0;1" keySplines=".5 0 1 1" fill="freeze"</animate> <animateTransform xlink:href="#middle-1" attributeName="transform" attributeType="XML" type="rotate" from="0 50 100" to="45 50 100" dur="250ms" begin="open-menu.begin + 100ms" calcMode="spline" keyTimes="0;1" keySplines="0 .6 .3 1" fill="freeze"</animateTransform> <animateTransform xlink:href="#middle-1" attributeName="transform" attributeType="XML" type="rotate" from="45 50 100" to="0 50 100" dur="150ms" begin="close-menu.begin + 0ms" calcMode="spline" keyTimes="0;1" keySplines=".5 0 1 1" fill="freeze"</animateTransform> <animate xlink:href="#middle-1" attributeName="d" from="M 25,100 C 50,100 50,100 75,100" to="M 0,100 C 50,100 50,100 100,100" dur="100ms" begin="close-menu.begin + 150ms" calcMode="spline" keyTimes="0;1" keySplines="0 .6 .3 1" fill="freeze"</animate> </path> <path id="middle-2" fill="transparent" stroke="#ffffff" stroke-width="0" stroke-miterlimit="100" d="M 0,100 C 50,100 50,100 100,100" transform="rotate(0 0 0)"> <animate xlink:href="#middle-2" attributeName="d" from="M 0,100 C 50,100 50,100 100,100" to="M 25,100 C 50,100 50,100 75,100" dur="100ms" begin="open-menu.begin + 0ms" calcMode="spline" keyTimes="0;1" keySplines=".5 0 1 1" fill="freeze"</animate> <animate xlink:href="#middle-2" attributeName="stroke-width" from="0" to="8" dur="1ms" begin="open-menu.begin + 99ms" fill="freeze"</animate> <animateTransform xlink:href="#middle-2" attributeName="transform" attributeType="XML" type="rotate" from="0 50 100" to="-45 50 100" dur="250ms" begin="open-menu.begin + 100ms" calcMode="spline" keyTimes="0;1" keySplines="0 .6 .3 1" fill="freeze"</animateTransform> <animateTransform xlink:href="#middle-2" attributeName="transform" attributeType="XML" type="rotate" from="-45 50 100" to="0 50 100" dur="150ms" begin="close-menu.begin + 0ms" calcMode="spline" keyTimes="0;1" keySplines=".5 0 1 1" fill="freeze"</animateTransform> <animate xlink:href="#middle-2" attributeName="stroke-width" from="8" to="0" dur="1ms" begin="close-menu.begin + 150ms" fill="freeze"</animate> <animate xlink:href="#middle-2" attributeName="d" from="M 25,100 C 50,100 50,100 75,100" to="M 0,100 C 50,100 50,100 100,100" dur="100ms" begin="close-menu.begin + 150ms" calcMode="spline" keyTimes="0;1" keySplines="0 .6 .3 1" fill="freeze"</animate> </path> </svg>