Image Occlusion background and colors distorted/inverted on AnkiMobile (iOS) compared to Desktop

AnkiMobile (iPhone/iPad) Help
1

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!

Screenshot 2026-07-16 at 4.41.59 PM
Screenshot 2026-07-16 at 4.41.59 PM1504×1310 126 KB

IMG_4151
IMG_41511179×2556 79.3 KB

2

Also realized I’m seeing a similar thing happen on some but not all non-Image Occlusion cards as well. So just additional context. This other card does have a more customized template/css but nothing that would change the image like this.

image
image1272×1016 120 KB

image
image1179×2556 153 KB

3

It looks like both of those images are similarly low-quality scans/snapshots (variegated background, bleed-through text), and I’m wonder if that’s related. Can you export those 2 notes – without scheduling information, but with media – so we can see if this is reproducible?

4

I tried but was not able to reproduce this behavior, using a screenshot of the OP’s screenshotted image and creating an Image Occlusion card. On my Mac desktop Anki and iOS AnkiMobile apps, both images appeared correct and identical.

However, screenshots are different than original image files. Hopefully, the OP will be able to provide us with one of the problem image files, so we can test it. If not, I thought of this experiment:

  1. Open one of the problem image files using the Preview app.
  2. File > Export… the file as a JPEG file.
  3. Either:
    • Replace the old collection.media image file with the new JPEG file; or
    • Add a new Image Occlusion card with the new JPEG file.
  4. See if the problem behavior occurs with the new JPEG file.

The idea is that JPEG files created by Preview are trusted to be “good” and should not experience the bug behavior. Depending on whether the bug behavior is still seen with the new, good JPEG file, that would tell us whether the problem might be related to the original image files used.

5

Here’s that, please let me know if there are any issues.

6

Thank you for providing the .apkg file. I was able to reproduce the behavior. Specifically, I looked at the “Alyssa kept her syntax book” image file paste-456f8705a52882c682c00476116afda4b16300b0.jpg in the LINGUIS deck.

However, when I look at the image file using Finder or open it in Preview on my Mac, I see that the AnkiMobile version of the image (too bright and washed out) is actually the most accurate representation of the image. The actual “problem” is that on desktop Anki, the image appears darker than it should.

The different appearances occur even when viewing the image in the Browse window in both Anki/AnkiMobile apps. Viewing/previewing the actual card is not necessary. As a result, we know that the problem isn’t related to CSS Styling.

Using the Inspector in Preview, I see that the problem image file has these qualities:
Type: JPEG, DPI: 72 pixels/inch, Color Model: RGB, ColorSync Profile: Display P3 Primaries; PQ (Adaptive Gain curve F9AB3B3C5E0AB9B5)
Compared to my screenshot image:
Type: JPEG, DPI: 144 pixels/inch, Color Model: RGB, ColorSync Profile: sRGB IEC61966-2.1

7

Oh odd, I’m seeing that as well when I look at the images via preview (screenshot for anyone following)

image
image1920×901 172 KB

8

It looks as I would expect, in terms of when I took the original phone, within the browser as well. So not entirely sure what accounts for the difference :thinking: but I’m also less familiar with the technical elements of image files that y’all have mentioned.

image
image714×528 59.7 KB

image
image702×1110 87.2 KB

9

I opened the image file in Krita and re-exported it, stripping the ICC:
Type: JPEG, DPI: 300x300, Color Model: RGB, ColorSync Profile: sRGB IEC61966-2.1
Although the colors on the new image are slightly different than the original, I see the same general behavior. On desktop Anki the new image is darker than what is seen in Preview and on AnkiMobile.

10

After looking into this more (helped on by what y’all have mentioned in terms of image terminology) it doesn’t seem to be an Anki issue. It seems to be a macOS Preview + HDR and new image from selection issue.

So apologies for thinking it was Anki related!

Marking this as resolved but feel free to chime in if there’s anything else worth adding, thanks again all!

The full workflow so anyone following:

  • Take HDR image on iPhone
  • Open image on macOS
  • Select portion of image

Path 1 (workflow from this thread)

  • Copy to clipboard
  • Paste to Anki
    • Image looks correct within Anki browser
    • Actual image when opened via preview from media collection looks incorrect
      • So something is getting copied over from Preview into Anki correctly
        • From everything I can tell it’s not an Anki issue

Path 2 (what I’ll do moving forward)

  • Copy to clipboard
  • Create new image from clipboard via Preview
  • Both of these workflows work as expected within Anki + the image within Anki’s media collection
    • Importing that new file directly into Anki
    • Opening that new file, selecting part or all of the image, and then pasting into Anki works as expected.