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

Your syntax is all correct and Safari is following the code path (if you replace that feColorMatrix with a feFlood/blue, it paints the area blue). I think what's happening is that SVG Filters on Safari are not very performant, so I think they punt when something gets too stressful like doing real-time video processing. If you replace the video with an image - this works fine.

(FWIW on my (very old) Mac, this doesn't work on Chrome/MacOS.)