Would does stroke-dashoffset glitch on Safari? Both mobile and Mac

Question

I have an animation using an svg. You can see the site here: https://www.demo.simplerwebsites.com

Codepen for just animation: https://codepen.io/webbchris2001/pen/wvojzwE

The animation is meant to 'write the text'. It works fine on Firefox and Chrome. However for some reason on safari it glitches and seems to blink. This is also the case on safari on the phone.

When I add from{stroke-dashoffset: 100%;} It then causes the same glitch across all browsers. I know that negative values are not accepted on Safari for stroke-dashoffset however I do not believe there would be any negative values here?

Javascript:

const masks = ['natur-n', 'natur-a', 'natur-t', 'natur-u', 'natur-r', 'comma', 'kunst-k', 'kunst-u', 'kunst-n', 'kunst-s', 'kunst-t', 'and-a', 'and-n', 'and-d', 'design-d', 'design-e', 'design-s', 'design-i', 'design-g', 'design-n'];

    masks.forEach((mask, index, el) => {
        const id = `#${mask}-path`;
        let path = document.querySelector(id);
        const length = path.getTotalLength();
        path.style.strokeDasharray = length;
        path.style.strokeDashoffset = length;
    });

Css:

        .marketing-lab .mask {
          fill: none;
          stroke: #fff;
          stroke-miterlimit: 10;
          stroke-dashoffset: 100%;
        }

        @keyframes strokeOffset {
          to {
            stroke-dashoffset: 0;
          }
        }
        #natur-n-path {
          animation: strokeOffset 0.2s ease-in-out forwards;
        }
        #natur-a-path {
          animation: strokeOffset 0.2s linear forwards 0.2s;
        }
        #natur-t-path{
          animation: strokeOffset 0.2s linear forwards 0.4s;
        }
        #natur-u-path {
          animation: strokeOffset 0.2s linear forwards 0.6s;
        }
        #natur-r-path {
          animation: strokeOffset 0.2s linear forwards 0.8s;
        }
        #comma-path{
          animation: strokeOffset 0.2s linear forwards 1.0s;
        }
        #kunst-k-path {
          animation: strokeOffset 0.2s linear forwards 1.2s;
        }
        #kunst-u-path {
          animation: strokeOffset 0.2s linear forwards 1.4s;
        }
        #kunst-n-path {
          animation: strokeOffset 0.2s linear forwards 1.6s;
        }
        #kunst-s-path {
          animation: strokeOffset 0.2s linear forwards 1.8s;
        }
        #kunst-t-path {
          animation: strokeOffset 0.2s linear forwards 2.0s;
        }
        #and-a-path {
          animation: strokeOffset 0.2s linear forwards 2.2s;
        }
        #and-n-path {
          animation: strokeOffset 0.2s linear forwards 2.4s;
        }
        #and-d-path {
          animation: strokeOffset 0.2s linear forwards 2.6s;
        }
        #design-d-path{
          animation: strokeOffset 0.2s linear forwards 2.8s;
        }
        #design-e-path{
          animation: strokeOffset 0.2s linear forwards 3.0s;
        }
        #design-s-path{
          animation: strokeOffset 0.2s linear forwards 3.2s;
        }
        #design-i-path{
          animation: strokeOffset 0.2s linear forwards 3.4s;
        }
        #design-g-path{
          animation: strokeOffset 0.2s linear forwards 3.6s;
        }
        #design-n-path{
          animation: strokeOffset 0.2s linear forwards 3.8s;
        }

Edit: It turns out its due this piece of javascript that I also have on the page for a carousel. However I cannot understand why??

let size = carousel_imgs[0].clientWidth;