[BUG] scroll bar in the default style is blocking the code block in Windows 10

[CXwudi]

Describe the bug 描述你遇到的错误

Since 6d8755d, the scroll bar in default style in Windows 10 is actually blocking the lower part of the code block.

Before the code block reworking from #1225, this was rendered as:

Expected behavior 期待的行为

Maybe the CSS needs to be adjusted to reserve some space for the scroll bar, and the amount of space should automatically be correctly determined by the rendering engine (so that no matter how thick is the scroll bar in the default style, the engine should always get it right.)

Screenshots 屏幕截图

See above

Build Environment 构建环境

• OS: Debian 12 from devcontainer
• Theme: 693e8f5
• Hugo: v0.124.1 Extend

Preview Environment 预览环境

• OS: Windows 10 Pro
• Browser: Brave Version 1.64.113 Chromium: 123.0.6312.86

Additional Information 补充信息

I guess it is just a small bug from 6d8755d

[HEIGE-PCloud]

I removed the old style because on macOS, you get a nice overlay scrollbar that does not shift the layout and hides automatically by default. Also ::-webkit-scrollbar is non-standard and does not work on Firefox anyway.

I don't have a Windows device right now, can you test whether https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter would help?

[CXwudi]

Unfortunately, scrollbar-gutter: stable; doesn't really work well. I personally prefer scrollbar-width: thin;, but not sure how it looks like on macOS.

This is what scrollbar-width: thin; looks like in Windows Chrome:

This is without (current state):

This is scrollbar-gutter: stable;, pretty much no changes:

I also noticed that there are quite a lot of tailwind CSS, maybe should we try https://www.npmjs.com/package/tailwind-scrollbar

[kkbt0]

Another interesting thing about the offset caused by the scrollbar is that the scrollbar causes the head bar position to change. This can be seen when switching pages. Because 100% is not equal to 100vw when there is a scrollbar.
GitHub also has this phenomenon.

[HEIGE-PCloud]

scrollbar-width: thin; seems to be a reasonable solution. In the worst case scenario we can always just add some margin-bottom to the code element.

There is some effort called "fluent scrollbar" to bring an overlay scrollbar to Chrome and Edge on Windows. https://issues.chromium.org/issues/40213017 but there isn't much progress and activity recently.

[HEIGE-PCloud]

Another interesting thing about the offset caused by the scrollbar is that the scrollbar causes the head bar position to change. This can be seen when switching pages. Because 100% is not equal to 100vw when there is a scrollbar. GitHub also has this phenomenon.

That's one of the reasons why I switched to the native scrollbar, because on macOS, you get an overlay scrollbar https://developer.chrome.com/docs/css-ui/scrollbar-styling#:~:text=Overlay%20scrollbars%20are%20floating%20scrollbars,the%20operating%20system%20to%20decide. that does not eat into the layout and thus avoid problems like this. But apparently it's not easy to get an overlay scrollbar on Windows.

[CXwudi]

Apparently, for Windows machines, there are some experimental flags in Chrome based browser where you can enable the macOS-liked scrollbar behaviour

This video shows the fluent scrollbar: https://www.youtube.com/watch?v=GdCNvcTu5ZA

And this one shows an overlay scrollbar (with fluent scrollbar): https://www.youtube.com/watch?v=3EFHqmHcxhM