Navigator and FramePoolManager struggle on rapid navigation

[JayPanoz]

The issue is more noticeable in an app when using keyboard navigation without any safeguard.

When skimming through the publication too quickly, FramePoolManager struggles to dispose of iframes and you may end up with dozens in the DOM, with a visible symptom being navigation skipping an entire chapter to load the next one directly, not waiting on the current chapter to be snapped properly.

For instance you can end up in this situation:

<div id="thorium-web-container" class="thorium-web-reader-app-module__2VDNCW__iframeContainer" style="width: 1326px;">
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="position: absolute; transition: visibility, opacity 0.1s linear; visibility: hidden; opacity: 0; pointer-events: none;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="position: absolute; transition: visibility, opacity 0.1s linear; visibility: hidden; opacity: 0; pointer-events: none;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="position: absolute; transition: visibility, opacity 0.1s linear; visibility: hidden; opacity: 0; pointer-events: none;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="visibility: hidden; opacity: 0; position: absolute; pointer-events: none; transition: visibility, opacity 0.1s linear;"></iframe>
  <iframe sandbox="allow-same-origin allow-scripts" class="readium-navigator-iframe" style="position: absolute; transition: visibility, opacity 0.1s linear;"></iframe>
</div>

Which is not ideal as it requires more memory than necessary, etc.

Discovered during Injection API development, but made sure that this is not a side effect of blob caching + reuse across resources, and that when navigating at normal speed, disposal of iframes happens exactly as expected – if anything Injection API even actually helps with memory usage in that case.