Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playground: Seeing double scrollbars in code editors #10732

Closed
OnkarRuikar opened this issue Mar 19, 2024 · 4 comments · Fixed by #10752
Closed

Playground: Seeing double scrollbars in code editors #10732

OnkarRuikar opened this issue Mar 19, 2024 · 4 comments · Fixed by #10752
Labels
layout Issues related to alignment, positioning and spacing/margin/padding p3 We don't have visibility when this will be addressed. plus:playground ux make the user experience awesome

Comments

@OnkarRuikar
Copy link
Contributor

OnkarRuikar commented Mar 19, 2024

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

1

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.
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Mar 19, 2024
@caugner caugner added p3 We don't have visibility when this will be addressed. ux make the user experience awesome layout Issues related to alignment, positioning and spacing/margin/padding plus:playground and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Mar 20, 2024
@caugner
Copy link
Contributor

caugner commented Mar 20, 2024

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
Copy link
Contributor Author

OnkarRuikar commented Mar 21, 2024

@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
Copy link
Contributor

caugner commented Mar 21, 2024

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
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
layout Issues related to alignment, positioning and spacing/margin/padding p3 We don't have visibility when this will be addressed. plus:playground ux make the user experience awesome
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants