Sidebar unable to expand at specific widths

[ChisakaKanako]

Describe the bug

I noticed this bug by chance in Safari. Weirdly, if I make the window a little smaller, the sidebar expands. I recorded a video of it. Not sure what’s causing this, but it happened when I used Mac’s built-in window resizing options to set the window to half the screen’s width.

Reproduction

Please watch this video. I tried to reproduce it in Chrome, but I wasn't able to.

trim.3BF74995-FB4D-42A8-BD0B-10DD18E0661D.MOV

Expected behavior

It should be expanded.

System Info

System:
    OS: macOS 26.5.2
    CPU: (10) arm64 Apple M4
    Memory: 437.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 26.4.0 - /usr/local/bin/node
    npm: 12.0.2 - /usr/local/bin/npm
    pnpm: 11.11.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 151.0.7922.138
    Safari: 26.5.2

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[bluwy]

I can't seem to reproduce this on Safari 26.6 (macOS 15.7.8). Do you see any hydration errors in the console? And does this consistently reproduces for you?

[ChisakaKanako]

I can't seem to reproduce this on Safari 26.6 (macOS 15.7.8). Do you see any hydration errors in the console? And does this consistently reproduces for you?

I restarted my device, but it's still the same, Chrome displays the sidebar at the same width, but Safari doesn't. I don't know anything about the console, but I took new videos so you can see it.

Btw, my site uses the same 2.0 beta 19, and it can expand the sidebar at the same width, but a gray overlay appears in full screen.

[ChisakaKanako]

2026-08-18.13.59.33.mov

2026-08-18.14.00.18.mov

2026-08-18.14.09.57.mov

[brc-dd]

Can you enter window.innerWidth in the console when it happens and show what it returns? Also, can you try using element inspector (click on and then the menu button) to check what's there above the button?

[ChisakaKanako]

Can you enter window.innerWidth in the console when it happens and show what it returns? Also, can you try using element inspector (click on and then the menu button) to check what's there above the button?

window.innerWidth is 960

For element inspector, check the screenshot:

[brc-dd]

ok nvm, I also just reproduced it separately. I had to enable scrollbars. I'm seeing it at 967 as well.

[brc-dd]

most likely I think it tries to expand but then the scrollbars get hidden and the width becomes large enough to hide the sidebar so it gets closed.

[brc-dd]

seems like media queries in webkit are calculated without the scrollbar. home page is broken in those widths, it first tries to render in the wide layout then if you try to scroll it gets a scrollbar, and reload doesn't remove that scrollbar, but if you enter the url directly, it gets removed. wtf is this.

[brc-dd]

layout shift is still there on load in safari near the breakpoints if the classic scrollbars are enabled, but I don't think many people using safari use classic scrollbars and it doesn't break any functionality, so I'm gonna leave it while we decide how to handle the scrollbar shift in general (see #5310). if this happens on windows/linux for someone, please open an issue.