SVG filter not applied when using full screen

Question

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>

Answer 1

Ian Gilman of openseadragon pushed me in the right direction (see https://github.com/openseadragon/openseadragon/issues/2391)

I wondered what would happen if I put my SVG in a div which is not removed. I have my bar with buttons outside the viewer, and it is displayed in full screen mode, so it is not removed and a good candidate to see if my filters would be applied... and yes they are applied as hoped/expected. I also can add my SVG to the div of the Openseadragon viewer, That also works. To take care the SVG itself is not displayed, I just added display:none.

A new CodePen with this simple solution/workaround: https://codepen.io/r-w-c/pen/MWzROqZ

Here the code snippet (switching to full screen mode still does not work here, but it does in the CodePen):

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;
}

#svg {
  display: none;
}

<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>

<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">
      <!-- SVG used for image filter -->
      <svg id="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>
</div>