Playground: Seeing double scrollbars in code editors

[OnkarRuikar]

Steps to reproduce:

1. Open https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#reds_of_different_shades
2. Open the code in playground
3. As the CSS code is long there is a scrollbar in the CSS editor
4. Notice the double scrollbars
5. Add more code to other editors and they'll have double scrollbars too

Reproduced on

• Linux Mint 21.3 x86_64 in chromium based browsers Chrome, Edge etc.
• Windows 11 Edge and Brave browsers.
• On Firefox with "Always show scrollbars" setting on.

[caugner]

Unfortunately, I wasn't able to reproduce this on Mac OS with Chrome, Edge or Firefox.

@OnkarRuikar If you have any insights into what might be causing these double scrollbars, please don't hesitate to add details or open a PR.

Here's a direct link to the Playground: https://developer.mozilla.org/en-US/play?id=LNTRTB2iJlMEC4Yph%2BlVdaS99hx%2FfQic0vyTxtKy5bhTbHxJ6ej6UDdazcpLStfbcpQ%2FMDZvhMtcv%2FSL

[OnkarRuikar]

@caugner I've created a PR #10752 to fix this. When and where it broke is a mystery though.

Unfortunately, I wasn't able to reproduce this on Mac OS with Chrome, Edge or Firefox.

Could you try the "Show scroll bars: always" setting?
Or in Firefox with "Always show scrollbars" setting on?

[caugner]

Could you try the "Show scroll bars: always" setting?
Or in Firefox with "Always show scrollbars" setting on?

Thanks for the PR. Unfortunately, I don't seem to find that Firefox setting, and I'm unable to reproduce the issue with the "Show scroll bars: Always" Mac OS setting.

[OnkarRuikar]

Thanks for the PR. Unfortunately, I don't seem to find that Firefox setting, and I'm unable to reproduce the issue with the "Show scroll bars: Always" Mac OS setting.

You can quickly see what's happening using this online browser testing session. In the long run the best option would be to have VMs hosted somewhere in Mozilla network for doing such tests.