Filter brightness function in css doesnt work on Edge, IE 11, and Firefox

In a mobile version, I cant change the color of the logo black to white using the filter property in CSS. It works in Chrome, but not in IE v11, Firefox, and Edge. Even the filter property supports all browsers? I also tried the javascript to make it work - no success. I'm not sure onload function in the body tag is a good idea?

JSFIDDLE

CSS

-webkit-filter: brightness(0) invert() !important;
-ms-filter: brightness(0) invert() !important;
-moz-filter: brightness(0) invert() !important;
-o-filter: brightness(0) invert() !important;
filter: brightness(0) invert() !important;

HTML

<div class="header">
    <a href="http://www.svrs.com"><img src="imgs/logo-svrs.png" class="logo-svrs" alt="Sorenson VRS"></a>
</div>

Javascript

<script>
  function myFunction() {
    document.getElementById("logo").style.filter = "brightness(300%)";
    document.getElementById("logo").style.WebkitFilter = "brightness(300%)"; 
    document.getElementById("logo").style.msfilter = "brightness(300%)";
    document.getElementById("logo").style.mozFilter = "brightness(300%)";
    document.getElementById("logo").style.oFilter = "brightness(300%)"; 
  }
</script>