CSS Filter using SVG tiled with Safari

I'm trying to create a distressed sort of pattern on an html element using an SVG filter applied via CSS using the filter property.

I've found a few examples and tweaked them to my preference and all was good in the world until I tested with Safari. For some reason it randomly tiles the effect and despite my best efforts I cannot find an sort of work around.

I've found a few posts alluding to similar issues but nothing exactly the same. Can anyone confirm if this is a bug or if I'm doing something wrong!

This is my filter:

<svg>
        <filter id="squiggle">
            <feturbulence basefrequency="0.1" numoctaves="2" seed="4" type="fractalNoise" stitchtiles="stitch" result="result1" />
            <fedisplacementmap in2="result1" scale="99" result="result2" xchannelselector="R" in="SourceGraphic" />
            <fecomposite in2="result2" in="SourceGraphic" operator="atop" result="fbSourceGraphic" />
        </filter>
  </svg>

Basic HTML is:

.container {
  padding: 3rem;
  margin-left: auto;
  margin-right: auto;
  background-color: grey;
  background-size: cover;
  font-size: 20px;
  filter: url("#squiggle");
  position: absolute;
  width: 90vw;
  height: 80%;
}

I have created an example code pen here:

https://codepen.io/antonyjsmith/pen/WNJoKMW

Works fine on Chrome and Firefox, weird tiles on Safari.

Any help or pointers would be much appreciated.