Thank you kleinerpirat. I’m not sure it’s a javascript problem, as the bug only occurs only a small percent of the time, seemingly at random. There are no particular cards that seem to trigger the issue and the template works fine most of the time.
The only javascript in my template is this on the front template
<script>
if (typeof anki !== 'undefined') {
anki.qFade=0;
}
</script>
Full template is as follows
Front
<script>
if (typeof anki !== 'undefined') {
anki.qFade=0;
}
</script>
<div id="card">
<div id="primary">
<div class="main">{{English}}</div>
<div class="note">{{hint:EnglishNote}}</div>
{{#EnglishWarn}}<div class="warn">{{EnglishWarn}}</div>{{/EnglishWarn}}
{{#Img}}<div class="img">{{Img}}</div>{{/Img}}
<div id="attributes">
{{#PoS}}<span>{{PoS}}</span>{{/PoS}}
{{#Focus}}<span>{{Focus}}</span>{{/Focus}}
{{#Aspect}}<span>{{Aspect}}</span>{{/Aspect}}
</div>
</div>
<div id="secondary-pending">
<div class="main">?</div>
</div>
</div>
BACK
<div id="card">
<div id="primary">
<div class="main">{{English}}</div>
<div class="note">{{EnglishNote}}</div>
{{#EnglishWarn}}<div class="warn">{{EnglishWarn}}</div>{{/EnglishWarn}}
{{#Img}}<div class="img">{{Img}}</div>{{/Img}}
<div id="attributes">
{{#PoS}}<span>{{PoS}}</span>{{/PoS}}
{{#Conjugation}}<span>{{Conjugation}}</span>{{/Conjugation}}
{{#Aspect}}<span>{{Aspect}}</span>{{/Aspect}}
{{#Root}}<span>{{Root}}</span>{{/Root}}
{{#Focus}}<span>{{Focus}}</span>{{/Focus}}
</div>
</div>
<div id="secondary">
<div class="main">{{Tagalog}}</div>
<div class="note">{{TagalogNote}}</div>
</div>
</div>
<div class="hidden">
{{Audio}}
{{NoteAudio}}
</div>
STYLING
:root {
--background: linear-gradient(135deg, #b8e0f3, #baf3ec);
--primary: 0, 113, 128;
--secondary: 255, 255, 255;
--warn: 255, 47, 13;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0.5rem;
box-sizing: border-box;
font-size: 18px;
display: flex;
flex-direction: column;
background: var(--background);
color: rgb(var(--primary));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#attributes {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: bold;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
#attributes:empty {
display: none;
}
.hidden {
display: none;
}
.main {
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: bold;
}
#attributes span {
background: rgba(var(--secondary), 0.15);
margin: 0 0.25rem;
margin-bottom: 0.5rem;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
white-space: nowrap;
height: 1rem;
line-height: 1rem;
vertical-align: middle;
}
#card {
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: center;
background-color: rgb(var(--secondary));
flex-direction: column;
text-align: center;
border-radius: 0.5rem;
box-shadow: 0 0 2rem rgba(var(--primary), 0.33);
}
#primary {
background-color: rgb(var(--primary));
padding: 1rem;
padding-bottom: 0;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
color: white;
}
#secondary,
#secondary-pending {
padding: 1rem;
padding-bottom: 0;
}
#secondary-pending {
opacity: 0.2;
font-weight: bold;
font-style: italic
}
#primary .note {
background-color: rgba(var(--secondary), 0.15);
}
#secondary .note {
background-color: rgba(var(--primary), 0.15);
}
.note, .warn, .img {
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 0.5rem
}
.warn {
background-color: rgba(var(--warn), 0.6);
}
.note:empty {
display: none;
}
a.hint {
color: var(--primary);
text-decoration: underline
}
.win a.hint:before {
content: 'Show ';
}
.note {
font-style: italic;
}
