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.

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

Modernizr detecting stylable scrollbars incorrectly #2248

Open
swanijam opened this issue Sep 17, 2017 · 6 comments
Open

Modernizr detecting stylable scrollbars incorrectly #2248

swanijam opened this issue Sep 17, 2017 · 6 comments
Assignees
@swanijam

Comments

@swanijam
Copy link

I'm using Modernizr to choose to hide all scrollbars when a page is being viewed in firefox. This is because I've styled the scrollbars using webkit's ::-webkit-scrollbar selectors and haven't found a suitable alternative for firefox.

Since it's best practice to keep from using the User Agent String, I'm following the most common recommendation to use Modernizr for feature detection instead of browser detection.

I'm using the CSS Stylable Scrollbars property (cssscrollbar). That's supposed to return true for everything except firefox, but instead returns false for all browsers for me. (including Chrome and Safari, for which we have the scrollbars styled and working).

Other than including the custom-modernizr.js file in the header of the site and using it in javascript I'm not sure what other code is worth sharing, but I've got to be choosy with the code I share because it's for work.

Here's the bit where I check:

if (Modernizr.cssscrollbar) {
      console.log("Browser has css scrollbars!"); // This never gets run in Chrome, Firefox, or Safari.
    } else {
      console.log("Browser does not have css scrollbars.");
    }

Any ideas to fix Modernizr, or another way to determine when to remove the scrollbars?
@rickdmer
Copy link

I'm seeing this same issue with 3.5. Chrome is returning false for Modernizr.cssscrollbar.

@rickdmer
Copy link

rickdmer commented Oct 17, 2017 •
edited

Stepping through the cssscrollbar test in 3.5, it looks like the test was failing because my <body> element was hidden on page load because of less.js and the element that it's testing on has no height or width at that point. Not using less.js fixed this issue for me.

@rejas
Copy link
Member

rejas commented Jun 18, 2018 •
edited

@swanijam can't reproduce it here with v3.6. Can you please retest it with the latest (3.6) version or check if something like @rickdmer had is the cause of your problem?

@onassar
Copy link

onassar commented Dec 8, 2020

I just updated Chrome (to 87.x) and find this happening when it's within an iframe. Anyone else running into this?

@Markel
Copy link
Contributor

Markel commented Dec 10, 2020

Hi @onassar 👋
Does it make a difference whether the iframe is hidden or visible? Saying due to #1911 (comment).

@onassar
Copy link

onassar commented Dec 10, 2020

Yep when it's hidden. This was working okay before hand :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@swanijam swanijam

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@onassar @rejas @rickdmer @swanijam @Markel