AnkiMobile CSS color not working as expected

Anki Card Design
15

I don’t get the impression that this is an Anki related bug, since the flashcards are rendered within a webview based on your predefined OS browser, but rather a difference in how your CSS styles are declared or rendered.

However, I was not able to reproduce the same error you’re experiencing with the file you shared above, so I suggest using one of these following options so you can easily investigate on your devices:

  1. If you set the QTWEBENGINE_REMOTE_DEBUGGING environment variable to 8080 prior to starting Anki, you can navigate to http://localhost:8080 to debug the visible webpages, alternatively, you can try to install this add-on to open the inspector inside the main app.
  2. If the problem is exclusively on your smartphone, enable HTML inspection in Ankidroid and then navigate to chrome://inspect to open a remote debug window.

EDIT: I just noticed that you’re using AnkiMobile for iOS and not AnkiDroid, which might explain why I couldn’t reproduce your error; however, I believe you can achieve the same results through Eruda console for mobile browsers.

However, even if this doesn’t allow you to reach a satisfactory solution, I agree with @eltaurus that it may be possible to achieve the same aesthetics by slightly modifying your card’s markup.

I’m looking forward to seeing if we can help you with that.

4 Likes