10000 main page scrollbar completely invisible in chrome · Issue #1648 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

main page scrollbar completely invisible in chrome #1648

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.

Sign up for GitHub

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

Jump to bottom
Closed
lovasoa opened this issue Jul 9, 2023 · 6 comments · Fixed by #2237
Closed

main page scrollbar completely invisible in chrome #1648

lovasoa opened this issue Jul 9, 2023 · 6 comments · Fixed by #2237
Assignees
@codecalm

Comments

@lovasoa
Copy link
Contributor
lovasoa commented Jul 9, 2023

Describe the bug

Page scrollbars are not visible in google chrome.

Initially reported in sqlpage/SQLPage#17

Device

Google Chrome 114.0.5735.198 (Official Build) (64-bit)
Revision c3029382d11c5f499e4fc317353a43d411a5ce1c-refs/branch-heads/5735@{#1394}
OS Linux
JavaScript V8 11.4.183.25

To reproduce

Steps to reproduce the behavior:

  1. Go to https://sql.ophir.dev/ using google chrome
  2. Look at the right of the page: you don't see the page's scrollbar, even through the page is scrollable. There is space allocated to the scrollbar, but it is not visible.

Screenshots

image

you can see the scrollbar is here, it takes up space, but is not visible:
image

If you manually remove tabler's scrollbar styling, the issue disappears:
image
@lovasoa lovasoa added the bug Something isn't working label Jul 9, 2023
@rjd22
Copy link
Collaborator
rjd22 commented Jul 10, 2023

This seem not to be a bug but an implementation conflict. The background color you chose seems to hide the scollbar. If you remove the background color you will be able to find the styled scrollbar. At least on my machine this seems to be the case.

In this case if you want to used the unstyled scrollbar I would recommend overruling the scrollbar rules for your specific implementation.

@rjd22 rjd22 closed this as completed Jul 10, 2023
@lovasoa
Copy link
Contributor Author
lovasoa commented Jul 10, 2023

Hi, and thank you for your response. I understand the problem better now.

However, I still think this is a bug in tabler. I didn't choose the background color, because it was provided by default by tabler's "boxed" layout. The scrollbar is broken for anyone with this layout by default.

Don't you think we should fix it in this repo rather than overwriting the style everywhere this layout is used?

https://github.com/lovasoa/SQLpage/blob/main/sqlpage/templates/shell.handlebars

@rjd22 rjd22 reopened this Jul 10, 2023
@rjd22
Copy link
Collaborator
rjd22 commented Jul 10, 2023 •
edited
Loading

You're right. It seems to have more to so with that we're touching scrollbar-color in this location to make it more soft:

tabler/src/scss/mixins/_mixins.scss

Line 18 in aba771f

scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;

You could for now overrule this with a more obvious color to fix it for your situation for now.

@codecalm might it be an idea to remove this mixin completely and let the browser decide the scrollbar color? IMO we should not mess with user interface colors to much to avoid situations like these.

@BG-Software-BG BG-Software-BG added important Should be resolved ASAP and removed important Should be resolved ASAP labels Dec 7, 2023
@LeBogoo
Copy link
LeBogoo commented Jul 6, 2024 •
edited
Loading

I also ran into this today. I'm only using data-bs-theme="dark" on the body tag and the Sidebar layout example from the docs.

Is there any fix planned for the near future?

Edit for anyone else stumbling across this:
A temporary fix is this:

* {
  scrollbar-color: initial !important;
}

@codecalm codecalm removed the bug Something isn't working label Feb 3, 2025
@itopaloglu83
Copy link

For some reason the scrollbar is forced to be always visible in Safari. Default macOS settings hide the scrollbar when not in motion, so this creates an unexpected visual cue for the users.

::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
    -webkit-transition: background .3s;
    transition:background .3s
}
Image

@codecalm codecalm mentioned this issue Mar 24, 2025
Merged
@ethancrawford
Copy link
Collaborator

@codecalm - does #2237 need to be reworked given @itopaloglu83's comment above? I can see the same scrollbar in Safari as in the screenshot as well. It appears that using 100vw is causing further issues as described in #2271 also.

@ethancrawford ethancrawford mentioned this issue May 2, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@codecalm codecalm

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix scrollbar jumps when content is higher than screen tabler/tabler
7 participants
@rjd22 @itopaloglu83 @lovasoa @codecalm @ethancrawford @LeBogoo @BG-Software-BG
0