Preview and review look different

Some cards styling looks different on the preview and during actual reviews.

This is the preview (what I’d expect and what happens on Anki Desktop as well):

This is the review screen:

Hos do I fix this?

Thanks!


Backend Version = 0.1.38-anki24.04.1 (24.04.1 ccd9ca1a8309b80bcb50ddc5d99c7ce63440bce9)

Android Version = 13 (SDK 33)

ProductFlavor = full

Manufacturer = Xiaomi

Model = M2102J20SG

Hardware = qcom

Webview User Agent = Mozilla/5.0 (Linux; Android 13; M2102J20SG Build/TQ2B.230505.005.A1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/124.0.6367.123 Mobile Safari/537.36

ACRA UUID = df8be713-dc4c-4dc4-8012-5d2565b4c3d5

FSRS Enabled = false

Crash Reports Enabled = true````

Which theme is that (Settings > Appearance > Themes)? Dark? Have you tried with the other themes?

What formatting do you have in the fields of this note – and in the card template – and in the note type Styling?

[I’m not suggesting that preview and study *should* appear different with the same theme selected, just that knowing how this varies between the themes might help pinpoint whether this issue is specific to this card/template/styling, or an app-wide display issue.]

1 Like

I’m using the Dark night mode, but same thing happens on the Black one.

Comparing with the preview, the text color on the first link (which is a {{hint:}} field is darker, the background of the “loop-button” becomes lighter, and the space between the button and the “0” is smaller.

This is my css:

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

/* Image Transition Effect */
img {
    transition: transform .3s ease-in-out;
}

/* Image Hover Effect */
img#effect:hover {
    transform: rotate(60deg);
}

/* Replay Button Styling */
.replay-button svg {
    width: 28px; /* Adjust the width as needed */
    height: 28px; /* Adjust the height as needed */
}

.replay-button svg circle {
    fill: rgb(246, 245, 253);
    stroke: none; /* Ensure no stroke is applied */
    stroke-width: 1;
}

.replay-button svg path {
    fill: ; /* Ensure no fill is applied */
    transform: scale(0.57) translate(23px, 23px); /* Adjust the scale and translate values */
}

.loop-count {
  font-size: 20px; /* Adjust the size as needed */
  color: ; /* Optional: Change the color */
}

.loop-button {
  background-color: ; /* Optional: Change the color */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  padding: 5px; /* Padding inside the button */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth transition for background color */
}

.loop-image {
  display: block; /* Ensures the image is treated as a block element */
}

.loop-button:hover {
  background-color: #e0e0e0; /* Slightly darker gray on hover */
}

.nightMode img[src$=".svg"],
.nightMode img[src$=".png"] {
  filter: invert(1);
}

a.hint {
text-decoration: none;
}

There is no styling in the HTML section. This is the code in any case:

<div>{{hint:Español}}</div><br>
{{Spanish Audio}}
<br>
<br>
<div id="audio-container">
  <audio id="audio-player" src="{{Loop}}"></audio>
  <button id="loop-button" class="loop-button">
    <img id="loop-image" src="_loop.svg" alt="Loop">
  </button>
  <div><span id="loop-count" class="loop-count">0</span></div>
</div>

<script>
  var audio = document.getElementById('audio-player');
  var loopButton = document.getElementById('loop-button');
  var loopImage = document.getElementById('loop-image');
  var loopCount = document.getElementById('loop-count');
  var count = 0;
  var isLooping = false;

  loopButton.addEventListener('click', function() {
    isLooping = !isLooping;
    if (isLooping) {
      loopImage.src = '_pause.svg';
      loopImage.alt = 'Pause';
      audio.loop = false; // Disable native loop to handle it manually
      audio.play();
    } else {
      loopImage.src = '_loop.svg';
      loopImage.alt = 'Loop';
      audio.loop = false;
      audio.pause(); // Pause the audio immediately
      audio.currentTime = 0; // Reset the audio to the beginning
    }
    console.log('Loop button clicked, isLooping:', isLooping);
  });

  audio.addEventListener('ended', function() {
    console.log('Audio ended, isLooping:', isLooping);
    if (isLooping) {
      count++;
      loopCount.textContent = count;
      console.log('Loop count incremented:', count);
      audio.currentTime = 0;
      audio.play(); // Manually restart the audio
    }
  });
</script>

Thanks!

1 Like

Great, that should give the devs enough to look at to figure out where the issue is.

3 Likes

I tried to recreate your situation but it works fine for me.

  1. Could you tell me where you downloaded the _loop.svg from?

  2. Did you also try to recreate this situation on another Android-phone (is there a possibility for you to do that?)

  3. Try to give us the console logs. Your best bet doing this would be by inserting eruda into your template and then tapping the gear sign that appears. If there is nothing written in the console logs. Don’t bother with it and delete it.
    Here is a instruction on how to getting eruda to work:
    Development Guide · ankidroid/Anki-Android Wiki · GitHub

If you have problems with eruda let us know.

1 Like

Hi, Duude.

Thanks for taking the time to check this out.

  1. _loop_svg is taken from here: Phosphor Icons (arrow-clockwise-fill version).

  2. I currently don’t have another phone to try it with, but I’ll look for one. I tried using a different build (B, C, D, etc.), but for some reason whenever I install one, the collection from AnkiDroid.A appears loaded automatically, so I couldn’t check on a different profile either.

  3. I followed the instructions to check the console, but there is no message.

I am attaching a deck with an example note here, in case that’s useful.

2 Likes

I was able to recreate your problem. Apparently this is not a bug on your end.
It is apparently the way the previewer handles the cards.
The previewer shows the cards differently than the reviewer. I don’t know why. But when I look at it, the same happens for all of my cards too, where I use a button. It is very notable in dark mode rather than in the normal mode.

I don’t know why this happens. But it happens.
This seems to be a bug? I don’t know. If it is, we can really good demonstrate it with your screenshots. There is apparently no solution for this.
The only way to make this “prettier” for yourself is by making extra CSS styling for AnkiDroid. This is something you can achieve by using platform specific css (take a look here: Styling & HTML - Anki Manual).

2 Likes

Are you fine with your screenshots being used in a bug report?

Oh, I see, good to know I wasn’t doing anything weird, but too bad it’s a bug, I guess.

In any case, sure, no problem using the screenshots.

Thanks for your help!

I’ll add some extra CSS then until this is fixed.

1 Like

In fact, I can create the bug report directly on github if you want. Let me know. :slight_smile:

1 Like

Oh yeah. If you want to, you can also do it yourself.
But remember doing it on the AnkiDroid github.

1 Like

I opened it here, in case you want to add something else I missed.

Thanks again!

2 Likes

In a nutshell, the previewer is updated and use the same style of the desktop version

And the reviewer is outdated

2 Likes

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