I have a custom scrollbar that appears in Chromium and Safari, but it will not show up in Chrome... makes no sense! Does anyone know what may be causing this?
EDIT may also be worth noting that the scrollbar USED to appear in Chrome just fine... maybe some new Chrome update broke it?
Here is a link to the site (scrollbar is at the bottom): www.missingnewyork.com/store
And here is the CSS for the scrollbar:
::-webkit-scrollbar {
height: 1%;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
That's how it should look? (smaller maybe)
If that is the case it's probably because of the height: 1%;. CSS doesn't know very well what is the % for heights, it's better to not use it. Try to use vh of some fixed value.
Related
Hello!
I put this into my css file for changing the look of the scrollbar.
It works in nearly every browser as intended, but not in firefox:
::-webkit-scrollbar{
width: 10px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb{
background-color: #353b48;
}
What do I need to make in work in Firefox too? ^^
The ::-webkit-scrollbar selector is not supported in Firefox:
https://caniuse.com/?search=%3A%3A-webkit-scrollbar
You can still customize the scrollbar though! See these:
Custom CSS Scrollbar for Firefox
Custom CSS Scrollbar for Firefox
Firefox doesn't support "-webkit-scrollbar", but it still supports a custom scrollbar.
scrollbar-color: #f1f1f1 white;
scrollbar-width: thin;
Just add that to your code.
Source
This is the CSS I'm using to style a vertical scroll bar.
overflow-y: scroll;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #COLOR_1;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: #COLOR_2;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #COLOR_2;
}
scrollbar-color: ${props => "#COLOR_2" + " " + "#COLOR_1"};
scrollbar-width: thin;
This is the result I expect (works on Chrome):
This is what I'm getting on Firefox:
How to get rid of the black line?
It comes from the top and goes all the way to the bottom.
I experienced the same thing and inspired by your comment, I did some more digging.
This appears to be a bug within Firefox. Screenshots are attached to that bug showing a similar black outline around the scrollbar as you experienced when setting scrollbar-color. It appears like it's an issue on Windows Firefox only.
A fix was pushed and appears to be slated to be released in Firefox 85.
There was a comment containing a workaround: "If you set widget.disable-native-theme-for-content=true in about:config and refresh" that the OP said fixed it, but if your app is public-facing will not be much help. I tried this workaround for my site and it did not work perfectly, it removed the black outline but added a few colored pixels at the top and bottom of the scrollbar (I believe it's related to up/down buttons which are hidden by scrollbar-width: thin)
Another workaround is to not set scrollbar-color and the black outline should go away, although that is not the ideal solution when Chrome works correctly when changing scrollbar color to match the theme of your site.
I have just encountered the strangest bug I have ever seen.
You can see a demonstration here: Fiddle
I have an iframe from google maps, wrapped in a div that has the following styles:
.container {
width: 600px;
background: red;
/* Problematic propeties */
box-shadow: 0px 40px 20px 0 blue;
perspective: 10px;
overflow: hidden;
/* ---- */
}
The only style the iframe has, other than default is display: block.
The issue is, that the iframe gets moved, depending on the value of box-shadow of its parent div. From my experiments i found out that it gets moved to the right by the: box-shadow blur - box-shadow x-position. Its a little hard to explain so i encourage you to take a look at my fiddle.
If i remove any of the css propeties that are in the "problematic propeties" comment, the issue goes away. My question is: Is there any way to fix this issue, without removing any of those propeties?
The issue is only visible in Chrome - Firefox and IE are fine.
I search for a long and I can't find an answer :/
In Chrome (Internet Explorer, Konqueror, and many others) the h1 margin at bottom is added to .blue. However, Firefox respect the css rules properly.
Any suggestion?
HTML
<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>
CSS
.red{
background: red;
/* All this contain margins */
float:left;
/* padding-top:1px; */
/* display: inline-block */
/* overflow: hidden */
}
.blue{
background: blue;
min-height: 60px;
}
h1{
margin: 10px 0 20px;
background: green;
}
Gecko-based: [This one is the correct, I guess]
Webkit-based, KHTML-based and Trident shell:
CODEPEN
http://codepen.io/marquex/pen/fzsIk
The margin issue you are having is related with the min-height rule in the .blue div. Replace it for a height rule if it is possible to get the same result in Chrome and Firefox.
I have no idea why that is happening when using min-height though. Maybe is some kind of Chrome's bug.
Define your fonts, this is the problem, every browser have different settings for default fonts, headings (h1...h6) respectively. So the actual height of the text in h1 will be different and this is the cause for different margins at bottom/top.
As you can see, Gecko-based browser uses a sort of Garamond-styled font, all other use by default Times New Roman, of course if user was predefined the fonts for pages, sometimes everything may look the same across all browsers, example:
h1{
margin: 10px 0 20px;
background: green;
font-family: "Your-favorite-font", Times, sans-serif;
font-size: 2em;
}
RESOLVING
After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here.
Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.
Is it possible to increase the width of a scrollbar on a <div> element placed inside the <body>?
I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div> element has its own scrollbar.
This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #888
}
::-webkit-scrollbar-thumb {
background: #eee
}
JSFiddle Demo
References:
Custom Scrollbars in WebKit | CSS-Tricks
WebKit scrollbar demo from CSS-Tricks
15 Different scrollbar configurations
If you are talking about the scrollbar that automatically appears on a div with overflow: scroll (or auto), then no, that's still a native scrollbar rendered by the browser using normal OS widgets, and not something that can be styled(*).
Whilst you can replace it with a proxy made out of stylable divs and JavaScript as suggested by Matt, I wouldn't recommend it for the general case. Script-driven scrollbars never quite behave exactly the same as real OS scrollbars, causing usability and accessibility problems.
(*: Except for the IE colouring styles, which I wouldn't really recommend either. Apart from being IE-only, using them forces IE to fall back from using nice scrollbar images from the current Windows theme to ugly old Win95-style scrollbars.)
You can stablish specific toolbar for div
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
see demo in jsfiddle.net
This sets the scrollbar width:
::-webkit-scrollbar {
width: 8px; // for vertical scroll bar
height: 8px; // for horizontal scroll bar
}
// for Firefox add this class as well
.thin_scroll{
scrollbar-width: thin; // auto | thin | none | <length>;
}
Yes.
If the scrollbar is not the browser scrollbar, then it will be built of regular HTML elements (probably divs and spans) and can thus be styled (or will be Flash, Java, etc and can be customized as per those environments).
The specifics depend on the DOM structure used.
My experience with trying to use CSS to modify the scroll bars is don't. Only IE will let you do this.