issue anki 2.1.6

[yffaria]

Prerequisite checklist

• [x] In case of a bug: Have you tried restarting Anki?
• [x] Are you running the latest version of the add-on. Have you redownloaded the add-on from AnkiWeb to make sure?
• [x] Did you check the add-on documentation (e.g. AnkiWeb description, Wiki if it exists) for known issues?
• [x] Did you perform a cursory search through the existing issue reports?

What is the problem/feature you would like to see fixed/implemented?

[Be as specific as possible. Provide screenshots if you think they can help.]

How can we reproduce the problem?

[What were you doing when the problem occurred?]

1. [First step]
2. [Second step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Reproducible?: [Can you reliably reproduce the issue by following the steps above?]

Version information

Anki

[Please head to Help → About Anki and Paste the version string here, e.g.:]

[Version 2.0.47] [Qt 4.8.1 PyQt 4.9.1]

System

• Operating system: [Windows/macOS/Linux]
• Version: [e.g. 10, High Sierra, Ubuntu 18.04]

[yffaria]

What is the problem/feature you would like to see fixed/implemented?

[Be as specific as possible. Provide screenshots if you think they can help.] How can we reproduce the problem?

[What were you doing when the problem occurred?]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Reproducible?: [Can you reliably reproduce the issue by following the steps above?] Version information

Anki

[Please head to Help → About Anki and Paste the version string here, e.g.:]

[Version 2.1.6] [Qt 5.12.0 PyQt 5.11.3]

System

Operating system: Windows
Version: 10

[glutanimate]

Sorry, can't reproduce this. Please try resetting your card template to the following defaults:

Front Template

{{#Image}}
<div id="io-header">{{Header}}</div>
<div id="io-wrapper">
  <div id="io-overlay">{{Question Mask}}</div>
  <div id="io-original">{{Image}}</div>
</div>
<div id="io-footer">{{Footer}}</div>

<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 === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>
{{/Image}}

Styling

/* GENERAL CARD STYLE */

.card {

  font-family: "Helvetica LT Std", Helvetica, Arial, Sans;
  font-size: 150%;
  text-align: center;
  color: black;
  background-color: white;
}

/* OCCLUSION CSS START - don't edit this */
#io-overlay {
  position:absolute;
  top:0;
  width:100%;
  z-index:3
}

#io-original {
  position:relative;
  top:0;
  width:100%;
  z-index:2;
  visibility: hidden;
}

#io-wrapper {
  position:relative;
  width: 100%;
}
/* OCCLUSION CSS END */

/* OTHER STYLES */
#io-header{
  font-size: 1.1em;
  margin-bottom: 0.2em;
}

#io-footer{
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.8em;
  font-style: italic;
}

#io-extra-wrapper{
  /* the wrapper is needed to center the
  left-aligned blocks below it */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
}

#io-extra{
  text-align:center;
  display: inline-block;
}

.io-extra-entry{
  margin-top: 0.8em;
  font-size: 0.9em;
  text-align:left;
}

.io-field-descr{
  margin-bottom: 0.2em;
  font-weight: bold;
  font-size: 1em;
}

#io-revl-btn {
  font-size: 0.5em;
}

/* ADJUSTMENTS FOR MOBILE DEVICES */

.mobile .card, .mobile #content {
  font-size: 120%;
  margin: 0;
}

.mobile #io-extra-wrapper {
  width: 95%;
}

.mobile #io-revl-btn {
  font-size: 0.8em;
}

Back Template

{{#Image}}
<div id="io-header">{{Header}}</div>
<div id="io-wrapper">
  <div id="io-overlay">{{Answer Mask}}</div>
  <div id="io-original">{{Image}}</div>
</div>
{{#Footer}}<div id="io-footer">{{Footer}}</div>{{/Footer}}
<button id="io-revl-btn" onclick="toggle();">Toggle Masks</button>
<div id="io-extra-wrapper">
  <div id="io-extra">
    {{#Remarks}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Remarks</div>{{Remarks}}
      </div>
    {{/Remarks}}
    {{#Sources}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Sources</div>{{Sources}}
      </div>
    {{/Sources}}
    {{#Extra 1}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Extra 1</div>{{Extra 1}}
      </div>
    {{/Extra 1}}
    {{#Extra 2}}
      <div class="io-extra-entry">
        <div class="io-field-descr">Extra 2</div>{{Extra 2}}
      </div>
    {{/Extra 2}}
  </div>
</div>

<script>
// Toggle answer mask on clicking the image
var toggle = function() {
  var amask = document.getElementById('io-overlay');
  if (amask.style.display === 'block' || amask.style.display === '')
    amask.style.display = 'none';
  else
    amask.style.display = 'block'
}

// 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 === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>
{{/Image}}

To input these defaults, from Anki's main screen please head to Tools → Manage Note Types. Then select the Image Occlusion Enhanced entry and click on Cards... on the right hand side.

Please note that replacing the existing values for templates and styling will remove any customizations you might have performed (e.g. the dark card background, if that isn't Night Mode).

Should resetting the template values not work, then I'd like to ask you to please disable all add-ons aside from IO and see if that helps.

[yffaria]

now It's works fine. Thanks!

The problem would be my customizations.

Thanks for the help!

[glutanimate]

No worries! Glad to hear everything is working fine now.