facebook / facebook/docusaurus

Theme: can't set sidebar collapsible category transition to `transition: 0ms` with CSS

Open
#12,043 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [x] I'm using the latest version of Docusaurus.
- [x] I have tried the `npm run clear` or `yarn clear` command.
- [x] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [ ] I have tried creating a repro with https://new.docusaurus.io.
- [x] I have read the console error message carefully (if applicable).

### Description

When I use Docusaurus to write docs, and want to ban the transition-duration, I change this css properties to 0ms, like follow code:

```css
ul {
transition: 0ms !important;
}
```

when I go back my website, and click a level 2 item link, some long content be override by other menu link, and however I how to try, I set transition-duration to 1ms, everything is ok, but only 0ms this number, my level 2 category other content be override by follow content, can't to expand more:

Image

### Reproducible demo

_No response_

### Steps to reproduce

1. Create a level 2 long category, about 6 and more.follow this category's parent category need put some link item.
2. Write follow content in custom.css: `ul {transition: 0ms !important;}`
3. go back to website, click this level 2 long category, my level 2 category other content be override by follow content, can't to expand more.(firefox)

### Expected behavior

The level 2 category menu should expand fully without content overlap, and all menu items should be visible.
Setting `transition: 0ms !important` should not break the layout or prevent the menu from expanding correctly.
The behavior should be consistent with when `transition-duration` is set to 1ms (or any positive value), where the menu works normally.

### Actual behavior

When `transition-duration: 0ms !important` is applied to the sidebar menu `ul` element:
1. After navigating back to the site and clicking a level 2 category link, the long content of the level 2 category is **overridden by subsequent content**.
2. The menu cannot be fully expanded, and some menu items are hidden or truncated.
3. This issue **does not occur** when `transition-duration` is set to any positive value (e.g., `1ms`, `16ms`), where the menu expands normally without content overlap.
4. Tested on Firefox browser.

### Your environment

- Public source code:

[custom.css](https://github.com/user-attachments/files/28066907/custom.css)

- Public site URL:
- Docusaurus version used:latest
- Environment name and version (e.g. Chrome 89, Node.js 16.4): node.js v26.1.0 and firefox latest version
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): Arch linux, linux-7.0.9.

### Self-service

- [ ] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.