facebook / facebook/docusaurus
Theme: can't set sidebar collapsible category transition to `transition: 0ms` with CSS
- 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:
### 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
Assessment
This issue has not been assessed yet.