CSS SVG filter: url(#element) not working in firefox and has strange behavior in safari

Question

I'm writing code based off of this SVG filter, however, even this simple filter does not displace the text. Any ideas on whats wrong or how I can get this to work in firefox and safari? In firefox there is no displacement, in safari text dissapears (only in my code, not in the minimum viable code, so maybe I have another issue). Another safari issue is that zooming in and out changes where the displacement effect occurs, which is a problem as well.

This might be due to the way units are inferred by chrome vs safari vs firefox and I heard that there was an issue with firefox not being able to read non URL based filters (although it does do the non displacement part, so I think it could be a units related issue), but I'm not sure how to go about fixing it. View in chrome to see functioning code

This is the HTML with code for the glitch mask and svg filter

html,
body {
  position: relative;
  background: black;
  width: 100%;
  height: 100%;
}

#text {
  filter: url("#filter");
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <!-- MASK DEFS -->
        <g id="glitch-mask-left" transform="translate(0, -2.5)">
          <rect x="5%" y="45%" width="7%" height="5%" fill="white" />
          <rect x="60%" y="25%" width="7%" height="4%" fill="white" />
           <rect x="35%" y="75%" width="10%" height="4%" fill="white" />
          <rect x="25%" y="50%" width="30%" height="2%" fill="white" />
        </g>
        
        <g id="glitch-mask-right" transform="translate(0, -2.5)">
          <rect x="5%" y="35%" width="11%" height="2%" fill="white" />
          <rect x="60%" y="60%" width="20%" height="1%" fill="white" />
          <rect x="80%" y="35%" width="20%" height="3%" fill="white" />
        </g>
    
        <filter id="filter">
          <!-- FLOODS -->
          <feFlood flood-color="#00E200" result="COLOR-left" />
          <feFlood flood-color="#E500E6" result="COLOR-right" />
          
          <!-- MASKS -->
          <feImage xlink:href="#glitch-mask-left" result="MASK-left-shift" />
          <feImage xlink:href="#glitch-mask-right" result="MASK-right-shift" />
          
          
          <!-- LEFT SHIFTED -->
          <feComposite in="SourceGraphic" in2="MASK-left-shift" operator="in" result="LEFT_SHIFT_10" />
          <feOffset dx="-7" dy="0" in="LEFT_SHIFT_10" result="LEFT_SHIFT_20" />
          
          <!-- RIGHT SHIFTED -->
          <feComposite in="SourceGraphic" in2="MASK-right-shift" operator="in" result="RIGHT_SHIFT_10" />
          <!-- RIGHT SHIFT RESULT -->
          <feOffset dx="12" dy="0" in="RIGHT_SHIFT_10" result="RIGHT_SHIFT_20" />
    
          <!-- REMAINDER -->
          <feComposite in="SourceGraphic" in2="MASK-left-shift" operator="out" result="REMAINDER_10" />
          <feComposite in="REMAINDER_10" in2="MASK-right-shift" operator="out" result="REMAINDER_20" />
          
          <feMerge result="RESULT_10">
            <feMergeNode in="RIGHT_SHIFT_20" />                    <feMergeNode in="LEFT_SHIFT_20" />
            <feMergeNode in="REMAINDER_20" />
          </feMerge>
          
          <!-- REMAINDER LEFT -->
          <feComposite in="COLOR-left" in2="RESULT_10" operator="in" result="RESULT_LEFT_10" />
          <feOffset dx="-4" dy="0" in="RESULT_LEFT_10" result="RESULT_LEFT_20" />
          
          <!-- REMAINDER RIGHT -->
          <feComposite in="COLOR-right" in2="RESULT_10" operator="in" result="RESULT_RIGHT_10" />
          <feOffset dx="4" dy="0" in="RESULT_RIGHT_10" result="RESULT_RIGHT_20" />
          
          <feMerge result="RESULT_20">
            <feMergeNode in="RESULT_RIGHT_20" />
            <feMergeNode in="RESULT_LEFT_20" />
            <feMergeNode in="RESULT_10" />
          </feMerge>
          
        </filter>
    
      </defs>
      
      <g id="text">
        <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" font-size="100" fill="white" font-family="helvetica" line-height="0" stroke-width="0">
        ANY SVG CONTENT
        </text>
      </g>
    </svg>

Link to codepen