Image Occlusion: Maintaining zoom state between front/back of card

Anki Card Design
1

I’m trying to maintain the zoom level and scroll position when flipping between the front and back of an Image Occlusion card. While I’ve managed to preserve the scroll position using sessionStorage, maintaining the zoom state has proven challenging.

Current implementation:

  • Zoom functionality works (buttons and ctrl+mousewheel)
  • Scroll position persists between front/back
  • Using transform: scale() for zoom

Attempted approaches that didn’t work:

  1. Hidden input fields to store zoom state
  2. localStorage/sessionStorage for zoom value
  3. URL hash parameters
  4. Global window/globalThis variable for zoom state

Current code structure (simplified):

javascript
var currentZoom = 1;
function saveZoomState() {
    sessionStorage.setItem('anki-scrollX', window.scrollX);
    sessionStorage.setItem('anki-scrollY', window.scrollY);
    // Zoom state doesn't persist despite various storage attempts
}

The card templates are identical except for Question/Answer masks.
Questions:

How can zoom state be preserved between front/back?
Are there Anki-specific limitations regarding state persistence between card sides?
Is there a recommended approach for sharing variables between front/back templates?

Full code available if needed. Using Anki 23.12.1 (1a1d4d54) with Python 3.9.15 Qt 6.6.1 PyQt 6.6.1.

2

I/O wasn’t written with this in mind. There’s a semi-related issue over on GitHub: Image occlusion doesn't scale when page zoomed in · Issue #2588 · ankitects/anki · GitHub

1 Like