Hello all,
I’m having an issue where my Image Occlusion cards look drastically different on AnkiMobile (iOS) compared to how they render on Anki Desktop.
On Desktop, the image renders perfectly normal (showing the natural paper texture and colors) and the occlusion masks display their correct colors (red active mask, yellow hidden masks).
On AnkiMobile (iOS), the exact same card looks completely blown out or distorted. The natural background texture of the image turns into a stark, blinding white, and the colors look heavily filtered/shifted.
I have attached screenshots showing the comparison:
- iOS App: The background texture is lost/whitened out
- Desktop Preview: How it is supposed to look.
My Environment:
- Desktop Platform: macOS, latest version
- Mobile Platform: iOS (AnkiMobile), latest version
- Note Type: Essentially Native Image Occlusion (from what I can recall), only added a field to conditionally hide the header
Card Front Template
{{#Header}}
{{^Hide Header}}
<div>{{Header}}</div>
<br>
{{/Hide Header}}
{{/Header}}
<div style="display: none">{{cloze:Occlusion}}</div>
<div id="err"></div>
<div id="image-occlusion-container">
{{Image}}
<canvas id="image-occlusion-canvas"></canvas>
</div>
<script>
try {
anki.imageOcclusion.setup();
} catch (exc) {
document.getElementById(
"err"
).innerHTML = `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}
</script>
Card Template Back
{{#Header}}
{{^Hide Header}}
<div>{{Header}}</div>
<br>
{{/Hide Header}}
{{/Header}}
<div style="display: none">{{cloze:Occlusion}}</div>
<div id="err"></div>
<div id="image-occlusion-container">
{{Image}}
<canvas id="image-occlusion-canvas"></canvas>
</div>
<script>
try {
anki.imageOcclusion.setup();
} catch (exc) {
document.getElementById(
"err"
).innerHTML = `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}
</script>
<div><button id="toggle">Toggle Masks</button></div>
{{#Back Extra}}
<div>{{Back Extra}}</div>
{{/Back Extra}}
Styling
#image-occlusion-canvas {
--inactive-shape-color: #ffeba2;
--active-shape-color: #ff8e8e;
--inactive-shape-border: 1px #212121;
--active-shape-border: 1px #212121;
--highlight-shape-color: #ff8e8e00;
--highlight-shape-border: 1px #ff8e8e;
}
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
Has anyone encountered this specific WebKit/CSS filter issue on iOS, or is there a specific setting in AnkiMobile’s dark mode image inversion handling that causes this stark white/sepia distortion? Any help or CSS workaround to force the true image colors on iOS would be appreciated!
