css svg filter safari not working

Question

I am using a css filter property by applying an svg feColorMatrix to it. It works on Firefox and Chrome very well. But it does not work on safari. I have been playing with the values, indentation, vendor prefixes and have not been able to successfully apply my filter in safari.

Can anyone help me identify why my filter does not work in Safari?

You can view the demo here https://codepen.io/Fallenstedt/pen/OvYGjV

My svg filter and video element:

<svg class="defs-only">
  <filter
    id="blue-tint"
    color-interpolation-filters="sRGB"
    x="0"
    y="0"
    height="100%"
    width="100%">
    <feColorMatrix
      type="matrix" 
      values="0 0 0 0 0
              0.75 0 0 0 0
              1.265 0 0 0 0
              0 0 0 1 0
              "/>
  </filter>
</svg>

<div class="background-vid">
  <video id="video"
    class="lazy"
    autoplay
    loop
    muted>
    <source src="https://storage.googleapis.com/coverr-main/mp4/Cloud_Surf.mp4" type="video/mp4">
  </video>
</div>

My scss:

html, body {
  margin: 0;
  padding: 0;
}
.defs-only {
  position: absolute;
  height: 0;
  width: 0;
  overflow: none;
  left: -100%;
}

.background-vid {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  -webkit-filter: grayscale(100%) url(#blue-tint);
  filter: grayscale(100%) url(#blue-tint);
  video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

Answer 1

If you use filters for svg elements in the css/scss file

filter: url(#filter_id);

Transfer the styles from the css/scss file into the svg file separately into styles, and everything will work, like this:

<svg>
...
<g id="group_id">
..
</g>

<filter id="filter_id" x="5.54736" y="0" width={width-11.3} height="80.0002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_326_868"/>
</filter>

<style>
{`
    #group_id {
         filter: url(#filter_id);
    }
`}
</style>
</svg>