SVG filter not applied when using full screen

I use OpenSeaDragon for viewing images. In my HTML page I have got a checkbox. When it is it checked, a SVG filter is applied to the image. This works just fine, except when switching to full screen mode.

My question What should I do to have the filter also applied in full screen mode?

Run the snippet, check the checkbox, click on the ‘full page button’ and see what I mean.

(Bummer: switching to full screen mode does not seem to work here on Stackoverflow.
On Codepen the same code works: https://codepen.io/r-w-c/pen/bGQZMJb:

var filter_gs_mid_Checkbox1 = document.getElementById('openseadragon1-filter-gs-mid');

filter_gs_mid_Checkbox1.addEventListener('change', e => {
  var viewer = document.getElementById("openseadragon1");
  if (e.target.checked) {
    viewer.classList.add('filter-gs-mid'); // <----- The issue. This works, but it is not enough
  } else {
    viewer.classList.remove('filter-gs-mid');
  }
});

var viewer1 = OpenSeadragon({
  id: 'openseadragon1',
  prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
  tileSources: 'https://openseadragon.github.io/example-images/highsmith/highsmith.dzi',
  showNavigator: true,
});
.filter-gs-mid {
  filter: url(#grayscale-mid-filter);
}

#openseadragon1 {
border: 1px solid #000;
height:250px;
}
<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>

<!-- SVG used for image filter -->
<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="grayscale-mid-filter"><feColorMatrix type="matrix" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1 0"></feColorMatrix></filter>
     </svg>

<div>
  <div id="openseadragon-tools1" class="openseadragon-tools">
    <input type="checkbox" id="openseadragon1-filter-gs-mid" name="openseadragon1-filter-gs-mid" />
    <label for="openseadragon1-filter-gs-mid">Grayscale middle</label>
  </div>
  
  <div id="openseadragon-viewer1">
    <!--<div id="openseadragon1-bar" class="openseadragon-bar"></div>-->
    <div id="openseadragon1" class="openseadragon"></div>
  </div>
</div>