Bug Report: Does not scroll back up if front of next card is taller than a single screen

AnkiMobile (iPhone/iPad) Suggestions
1

Anki for iOS 24.11 does not scroll back up to the top for the next card if it previously scrolled down to show the back side of the previous card.

1 Like
2

The first thing to check is if the card/note type is using Anki’s answer-scrolling functionality (based on <hr id=answer>), or something else custom.

Can you post the card templates – front, back, and styling, in preformatted text/code blocks, so we can see everything – of a card you’re having this issue with?

3

I have posted the card templates below. Additionally, you can find a video and two cards that trigger the bug at the very end.

First card:

Front:

{{Front}}

Back:

{{FrontSide}}

<hr id=answer>

{{Back}}

Styling:

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

Second Card

Front Template (From the image occlusion plugin):

{{#Header}}<div>{{Header}}</div>{{/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>

Back:

{{#Header}}<div>{{Header}}</div>{{/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;
}

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

Video: bug-video.mp4 - Google Drive
The bug is visible on the second cards, I have had to manually scroll up to see the top of the image.

Cards: Bug Demo.apkg - Google Drive

4

Thanks for the report and reproduction steps, I will look into this.

2 Likes