Original image flashes for a short period of time when revealing answer

[glutanimate]

It looks like, with Anki 2.1, the base image is now loaded before the SVG mask, causing the answers to flash shortly before the occlusions set in. The issue seems to be more pronounced with a larger number of shapes and more complex SVG masks in general.

Platforms tested so far:

• Ubuntu 14.04 with Anki 2.1 source build (https://github.com/dae/anki/commit/fccfdef73de624f2be563229178e112b1f68d454)
• Ubuntu 17.04 with Anki 2.1 binary build (beta 27)

FWIW, users also reported a similar issue in the past on some releases of macOS and Anki 2.0 (#15).

[glutanimate]

Marking this is "high priority" because of its potentially detrimental effect on learning.

@dae, sorry to bother you with this, but you wouldn't have any ideas on how to address this would you? Bearing cross-platform support in mind, do you think there's any way to fix this without introducing custom JavaScript into the card template?

[dae]

I can't seem to reproduce this on my machine - both images load before the fade in begins. I presume you haven't adjusted the default qFade/aFade? You could either tweak those in the template, or have the original img set to visibility:hidden and adjust it on the svg's onload if you wanted to be sure.

[dae]

https://imgur.com/a/iICKB

[glutanimate]

Sorry, I probably should have been clearer in the description. The question side is working perfectly fine here as well. It's only on the answer side where I experience this issue: https://www.youtube.com/watch?v=z-e4sBXL2TU

In any case, thanks a lot for the hint about the fade timers! Setting aFade to 10 seems to be working fine as a workaround for now, but I think I'll also explore using an onload event as you said.

[dae]

My mistake for not reading the title clearly :-) Glad to hear you've got a workaround for now.

[glutanimate]

Closing this with the proviso that we still need to perform cross-platform tests (cf. https://github.com/glutanimate/image-occlusion-enhanced/projects/1#card-8246696).

[osg]

Just ran across this too.

Anki:

Version 2.1.1
Qt 5.9.2 PyQt 5.9

Add-on: 1374772155

System specs:

ursula@dankie:~$ uname -a
Linux dankie 4.15.0-20-generic #21~16.04.1-Ubuntu SMP
Wed Apr 25 02:42:04 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

Happy to be a tester if you need someone.

[penguingiraffe2]

Hi there,

I've downloaded the most recent version (Version 1.3.0-alpha1) and I'm still seeing this issue :(

[glutanimate]

@osg and @Moosehorse123 :

Thanks for the reports guys. I just tested this and there seems to be a small issue right now in migrating old I/O templates to the new version which addresses the image flash (if you start from scratch with a new I/O template in your collection, things should be working fine).

I will fix this soon, but while it is being worked on, what you could try is to add the following code to your card template. Specifically,

to the Front Template and Back Template:

<script>
// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
    var original = document.querySelector('#io-original');
    original.style.visibility = "visible";
}
if (mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>

and to the Styling field:

/* Anki 2.1 additions */
#io-original {
   visibility: hidden;
}

Please make sure to add these snippets at the very end of each respective field.

You can access the I/O card template from Anki's main screen by going to Tools → Manage Note Types → selecting Image Occlusion Enhanced in the note type list → and clicking on Cards. The respective fields you will have to enter the code snippets in are to the left.

[penguingiraffe2]

Sorry @glutanimate so this workaround takes away this flashing on the "Image Q/A 2.0 Enhanced", but now all of the other occluded items don't show up at all. It is only showing the single occlusion. Would it be possible to edit it so that all the other labels are shown after answering?

This is what is currently happening:

Meanwhile, on the note types "Image Q/A 2.0.2" I get a "Invalid HTML on card: TypeError: Cannot read property 'complete' of null" when adding this code to the respective fields...

Thanks so much for your help by the way

[glutanimate]

Ah, I see what's going on. Image Q/A 2.0 Enhanced and Image Q/A are both deprecated note types that are no longer supported by the add-on (they date back more than 2 years). However, you may use the add-on's note converter to migrate them to the new "Image Occlusion Enhanced" note type. To do so, please carefully follow the instructions in this wiki section (or the video tutorial linked at the top): https://github.com/glutanimate/image-occlusion-enhanced/wiki/Upgrading#updating-old-image-occlusion-notes

Once you've done that please check if the image flashing is gone, and if not please repeat the same additions you did beforehand, but this time for the "Image Occlusion Enhanced" (exact quote) note type.

[penguingiraffe2]

Great, I will try this and let you know. Thanks so much

[masonc15]

Hello @glutanimate ,

Is this still a known issue? I am having this issue currently after recently installing this extension. Thanks!

[masonc15]

@glutanimate Hi, I am running into this issue with Image Occlusion Enhanced. Any fix? It's a pretty big impact on the usability of this extension. Thanks!

[huandney]

aFade  =  50

For me, it works best by setting afade = 0. It may vary from computer to computer. I had noticed that somehow this configuration passed to other types of notes, at the time of the review, causing flickering.

[masonc15]

@huandney Returned to using this addon and still having this issue. Where is that afade setting that you are talking about? Didn't find it in the occlusion card template or the addon config. Thanks.

[hrideshmg]

@huandney Returned to using this addon and still having this issue. Where is that afade setting that you are talking about? Didn't find it in the occlusion card template or the addon config. Thanks.

Its under Tools -> Manage note types -> Cards after selecting image occlusion.

Seems like im facing the same issue, and messing with afade doesn't seem to do anything, also the flash happens when a new question appears after u choose good, easy, hard etc