[Bug] Sidebar content disappears after reload when custom CSS disables animation

[raily]

Themes and Custom CSS issues should go here

I’m not sure if this counts as a bug, but I’ll report it anyway.

Steps to reproduce

1. Add and enable the following CSS snippet:

.workspace-leaf-content {
    animation: none;
}

2. Collapse/hide the sidebars in Obsidian.
3. Reload the app by performing either of the following actions:
   • Press Cmd + P and execute Reload app without saving
   • Quit Obsidian and reopen it
4. Expand/open the left sidebar and right sidebar in the newly loaded window.

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

The sidebars should load properly and display their normal content (e.g., File Explorer, Search, Bookmarks, Properties, etc.).

Actual result

The content displayed in both sidebars is completely blank.

Environment

SYSTEM INFO:
	Obsidian version: 1.12.5
	Installer version: 1.10.6
	Operating system: Darwin Kernel Version 25.3.0: Wed Jan 28 20:53:31 PST 2026; root:xnu-12377.81.4~5/RELEASE_ARM64_T8122 25.3.0
	Login status: logged in
	Language: en
	Catalyst license: insider
	Insider build toggle: on
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 1
	Restricted mode: off
	Plugins installed: 0
	Plugins enabled: 0

RECOMMENDATIONS:
	Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.

---

Additional information

Note: Using animation: unset; does not trigger this bug.

[dawni]

The sidebar leaf content is drawn with an animation Obsidian call’s “node inserted” for a .node-insert-event class. (Mentioning the names so you can look them up in the source.) Your snippet explicitly says: Don’t draw those. That’s why they’re blank.

Not sure what you goal is. Maybe trying to stop an animation by a plugin? If so, try being more selective with the selector or style. Or make an exception for any animation you want to retain:

.workspace-leaf-content *:not(.node-insert-event) {
    animation: none;
}

[raily]

Thanks for the reply. I originally wanted to add my own custom animation to workspace-leaf-content. But it looks like that won’t be possible in this case.

The original animation: none; was just for testing.

[dawni]

@raily

But it looks like that won’t be possible in this case.

Why’s that?

Example:

@keyframes goPurple {
  from {background-color: orange;}
  to {background-color: purple;}
}

.workspace-leaf-content:not(.node-insert-event) {
  background-color: purple;
  animation-name: goPurple;
  animation-duration: 2s;
}

You’ll probably want to be more selective than that for whatever you’re trying to accomplish. I’m simply showing an example with .workspace-leaf-content:not(.node-insert-event).

[raily]

@dawni

@keyframes goPurple {
  from {background-color: orange;}
  to {background-color: purple;}
}

.workspace-leaf-content:not(.node-insert-event) {
  background-color: purple;
  animation-name: goPurple;
  animation-duration: 2s;
}

Yes, I’m really sorry I didn’t fully understand what you meant earlier. The code example you provided works perfectly.

thank you!