Skip to content

Fix staggered toolbar disappearance in some themes#294

Open
wlo2 wants to merge 1 commit intoPKM-er:masterfrom
wlo2:fix/staggered-disappearance
Open

Fix staggered toolbar disappearance in some themes#294
wlo2 wants to merge 1 commit intoPKM-er:masterfrom
wlo2:fix/staggered-disappearance

Conversation

@wlo2
Copy link

@wlo2 wlo2 commented Mar 1, 2026

In some themes (like cupertino), the editing toolbar disappears in two steps: the background vanishes semi-instantly, and the buttons/icons linger for a fraction of a second. This is caused by broad CSS transitions (e.g., transition: all 0.3s) in the theme that also apply to the visibility property. When a plugin sets visibility: hidden, the browser delays the state change until the transition completes, causing the staggered effect:

Screen.Recording.2026-03-01.mov

Proposing the following solution:

  • Instant Hiding via display: none: Updated main.ts and editingToolbarModal.ts to toggle display: none alongside visibility: hidden. This bypasses all CSS transitions and ensures the toolbar vanishes instantly.
  • Refined CSS Transitions: Replaced generic transition: all in styles.css with specific property transitions (transform, opacity, top, left) to prevent accidental visibility transitions.
  • CSS Fail-safe: Added a CSS rule to force display: none !important whenever the plugin applies visibility: hidden via inline styles, serving as a robust backstop against theme overrides.

Built and tested locally, the solution works, but it's very blunt, I'm assuming there is a more elegant way to fix that, please take a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant