BUG: Card view sometimes doesn't update

Since I updated to the version of Anki using the new QT UI (Version ⁨2.1.56 (07fd88dd)⁩, Python 3.9.15 Qt 6.4.0 PyQt 6.4.0, Windows 10), I sometimes encounter a bug in which the card view doesn’t update when showing a card’s answer or when transitioning from one card to the next. I can force the UI to re-render and show the card correctly by resizing the window. I did not ever encounter this bug while using older versions of Anki (not sure exactly what version I had before, but it was before the UI update).

I’ve attached a gif below showing an example where the view is incorrectly showing the back side of a card I have just answered. The view should be showing the front of the current card under review (note that the bottom bar is showing “show answer”, indicating that I should be looking at the front of a card). I move the window around a little and the view does not update. I resize the window and the view refreshes to correctly show the front of the card under review.
anki3

This happens just a small percentage of the time. It seems to happen more frequently for cards lapsed in the current review session. Typically I am using hotkeys to review, so I’m just hitting the space bar to go through reviews, but at some point I’ll hit space and the view will get stuck as shown above.

See if it is reproducible with the latest version

We also have a beta version if you want to test

It could be a card design issue as well; could you try with a different note type?

or an add-on issue

1 Like

If you can reproduce it with the basic notetype, it might be a bug. Otherwise it is more likely to be caused by invalid JS in your template.

I will try some different versions, but I have been using this same note type for 1+ years with no problem before the UI update

One thing that first comes to mind is the persistence of variables across cards, which started some time around 2.1.41 IIRC. If a script your template stores variables with the keywords let or const, it may cause errors in newer Anki versions.

If you share your template either here or via dm, I can take a look at it.

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;
}

Thanks. I’ll try to reproduce the issue later today :v:t2:

1 Like

I’m afraid this looks like a bug in the web toolkit/graphics driver. Changing your driver may help. Display Issues - Anki Manual

Thank you for all the suggestions.

I first tried updating to the latest 2.1.60 version. I’m unsure if the bug is still present in this build as it is unusably slow for me (Bug. After upgrade to 2.1.60 UI becames too slow - #4 by Greenman). Every card review takes about 1 second for the viewport to re-render when I show an answer / move to the next card.

The good news is that I tried 2.1.60 QT5 build and not only is it lightning fast, the bug from my original post seems to be resolved.

Some extra info:
@dae I didn’t get around to experimenting with different drivers before I resolved the issue. I’m not sure if there is a typo in the “Display Issues” page that mentions %APPDATA%\Anki2\gldriver6, but I don’t have this file with a 6 at the end. I do have a gldriver file, which is set to angle.

Also version 2.1.60 seems to have introduced a visual artifact into the card view (shown below in my screenshot, red arrows pointing to it). And if I may say, the white, transparent strip at the top (yellow arrows) is quite obnoxious.

Let me know if you’d like me to run any tests. Happy to help iron out any kinks.

This will be fixed a few versions down the line. Current versions try to give the toolbar the same background as the main webview, but for some templates it may not work that well, hence the artifact. I am working on a prototype that merges all webviews of the main window into one - then hacks like that won’t be needed anymore.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.