Flash of unstyled content (aka flicker) with external css file (recent, seemingly since 25.07)

[cody]

Hello, first off thanks for the continued development and support of Anki (both desktop and mobile)!

tl;dr at bottom as well

Issue
When flipping from the question to the answer side of a card, I’m experiencing a flash of unstyled content/flicker when going through cards.

Debugging - File structure
Here’s the structure of my style sheets since that will provide context.

_style.css
_boostrap.css

_style.css uses @import url("_boostrap.css");. Both of them are stored in VCS but I don’t want the boostrap file clogging up _style.css hence the two files + import.

Debugging - Overview
First off, this is a new issue. I’ve had this setup with my CSS files for a few months now and the flash of unstyled content/flicker is new as of this week so maybe it’s something to do with 25.07 on iOS?

Regardless, I’m seeing this on multiple templates and from the debugging I’ve done so far it.

Debugging - Breakdown
When removing the @import url("_bootstrap.css"); from _style.css and moving the styles from _bootstrap.css inside _style.css I still get one flash of unstyled content/flicker on AnkiMobile for the first card but it looks to be cached after that. So subsequent cards don’t have a flash of unstyled content/flicker.

With the steps in the paragraph, answering a card, undoing the answer, then re-answering the card results in there not being a flash of unstyled content/flicker. So again caching seems to be working as expected.

This is not the case with _style.css is using @import url("_bootstrap.css");, subsequent cards still flicker even though I’d expect the styles to be cached*.

*Speculation
Maybe the caching isn’t working import @import url("_bootstrap.css"); is being used?

Debugging - Isolating File Size

Additionally, I wasn’t sure if the size of either of both files might have an impact but that doesn’t seem to be the case.

_style.css // 2kb
_boostrap.css // 282kb
_test.css // 25 bytes

/* _style.css contents */
* {
  background: red
}

To isolated that I created an additional _test.css file and within style.css I imported that file using the same @import url("_test.css"); syntax. The issue still persisted.

Takeaway

For the time being, I’m just going to setup a git hook to minify the two css files into one (to avoid the seemingly problematic syntax) whenever I make changes, which isn’t very frequently, but it would be nice if the previous behavior* could be restored.

*(of using import url("_bootstrap.css"); within an external css file didn’t cause a flash of unstyled content/flicker)

Happy to provide additional context as well.

tl;dr

/* Current setup
 *
 * Flash of unstyled content/flicker */

_style.css // 2kb
@import url("_boostrap.css")

_boostrap.css // 282kb

/* Debug setup
 *
 * Flash of unstyled content/flicker */

_style.css // 2kb
@import url("_test.css")

_test.css // 25 bytes

/* Workaround setup
 *
 * Initial flash of unstyled content/flicker
 * but then works (likely cached) as expected */

_style.min.css // 234kb with _boostrap.css copied inside

Additional Info
I saw this post + issue that have a similar topic but seem to be speaking of Anki desktop and not mobile specifically. (can’t link the posts unfortunately but here are there titles and platforms below)

• Flickering (since v2.1.45) on Anki Forms
• Issue 1455 on ankitects/anki

[cody]

Here is a GIF of a screen capture of the flash of unstyled content/flicker as well a a static image of what that looks like.

Apologies that it’s endlessly looping, it looks like my account isn’t allowed to upload video files.

[Hildeguard]

Hello @cody

Do you rely on the advanced features of @import, like e.g. importing into a layer, supports-conditions or media queries?

If not, it would be interesting to know weither the flash of unstyled content also occurs, when you use the HTML <link> element to import your stylesheets.

Cheers!

[cody]

Hello @Hildeguard!

Do you rely on the advanced features of @import, like e.g. importing into a layer, supports-conditions or media queries?

The _style.css file is pretty much vanilla CSS in terms of syntax. I know that _boostrap.css uses media queries at a minimum. I’d imagine some of the others features mentioned as well being entire library. So it seems like the answer to the question is yes.

Bootstrap is v5.3.6 if that helps at all.

If not, it would be interesting to know weither the flash of unstyled content also occurs, when you use the HTML <link> element to import your stylesheets.

I can try that out and report back! That won’t be for a day or two though

[matta]

Sorry, I am sure that this is a dumb question, but do you really need Bootstrap? It’s a huge beast to import, including the supporting JavaScript, which is not going to run lightning fast.

[cody]

Great question!

I’m only using the CSS, which is still a decent amount, but I just wanted something simple that I was familiar with for utilities classes.

And I’d agree with ya that if I was including the JS that would err towards a bit much.

[dae]

Could I trouble you to provide a 1-2 card apkg that demonstrates this problem, so I can try to figure out what’s changed?

[cody]

Can do! Not sure of the best way to share a deck since it seems like an apkg can’t be uploaded to the forum + links aren’t allowed.

Here’s the ID of a shared deck with a couple of cards that I just created (but it says it needs 24 hours before it’s live)

922337731

See dropbox instead https://www.dropbox.com/scl/fi/shthxcim3c3u3413brs6c/Debug.apkg?rlkey=989biqh1qcf965wol7n3036i1&st=jxdhenkn&dl=0

[cody]

If not, it would be interesting to know weither the flash of unstyled content also occurs, when you use the HTML <link> element to import your stylesheets.

Just got around to testing this out @Hildeguard

The issue this persists when I have

<link rel="stylesheet" href="_style.css">

in the template instead of

@import url("._test-of-file.css");

[Danika_Dakika]

Put your link `in between backticks, in a code/preformatted text block` and you should be able to share it just fine.

[cody]

Ah, in that case here’s a link to the apkg file in dropbox

https://www.dropbox.com/scl/fi/shthxcim3c3u3413brs6c/Debug.apkg?rlkey=989biqh1qcf965wol7n3036i1&st=jxdhenkn&dl=0

[dae]

Thanks for that. I believe this is happening due to AnkiMobile currently lacking the external CSS preloading that the desktop version has. I intend to integrate the desktop review code into AnkiMobile later this year, and it should address this problem at the same time.

[cody]

Great, thanks @dae! (and others who chimed in on the thread)

[huandney]

Hello,
I’m having a flickering issue with several cards.
This flickering seems to be occurring in the latest versions of AnkiMobile. I’m currently using the latest version (25.09). I remember that this didn’t occur in older versions of AnkiMobile.

Here are the key observations:

• Flickering sometimes does not occur, and seems to be less frequent when we have the FrontSide field on the back.

• The problem is strictly limited to the native AnkiMobile app. The exact same card template works perfectly with no flicker on:

  • Anki Desktop

  • AnkiDroid

  • AnkiWeb, even when accessed through the Safari browser on the same iPhone.

I believe this is related to the issue described in this topic regarding unstyled content: Flash of unstyled content (aka Flicker) with external CSS file. Could you confirm if it’s the same root cause?

I have also recorded a screen video that clearly demonstrates the intermittent flicker, which I can provide.

[Danika_Dakika]

Do you use a similar sort of external CSS formatting? If you do, it seems like it must be the same issue, and I’ll merge this there.

[huandney]

Yes, it seems to be a problem with the external import, when I remove it there is no flicker