I defined these css styles :
.scrollbar {
float: left;
background: #fff;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
At runtime it runs only on Google Chrome. When I run the app through Mozilla Firefox then the app does not render properly the desired rendering. So how to make the styles applied for all browsers ?
You cannot implement this CSS across all browsers. -webkit is a vendor prefix for browsers that support either the WebKit or Blink browser engine. Right now support is inconsistent even within browsers that support this prefix:
MDN Documentation for ::-webkit-scrollbar
CanIUse Documentation for ::-webkit-scrollbar
If you absolutely need a fully customized scrollbar implementation that is fully cross-browser compatible you will very likely need to research a JavaScript based solution.
The good news is that since this is a vendor prefix, browsers that do not support it will simply ignore the declarations and load the scrollbar in whatever fashion that browser normally displays its scrolling mechanism.
Related
Scrollbar css works in Google chrome but not in mozilla and Internet Explorer.
My css is
.skin-1 ::-webkit-scrollbar {
width: 5px;
}
.skin-1 ::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
.skin-1 ::-webkit-scrollbar-thumb {
background-color: #0e9aef;
}
.skin-1 ::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
Currently, it is exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.
please read this CSS-Tricks article.
Scrollbar is NOT a css standard, that means some browsers may support it while others don't. In this case you are applying the `-webkit-ยด- prefix which aims just to next browsers:
Android, Chrome, iOS and Safari.
You can check here for more info.
Aa long as I know scroll bar is not supported at all in Firefox (if not changed reciently).
for a full browser compatibility I would recomend You to use some nice (and easy to use) jquery libraries around.
I want make the scrollbar for my site dark and customize it. It works on Chrome with ::-webkit-scrollbar but it doesn't work on Edge -- I couldn't find way changing the scrollbar color on Microsoft Edge.
Does anyone know how to do this? Please help :)
There is currently no way to do this in Microsoft Edge. In IE there were vendor specific, non-standard, CSS properties to achieve this. These were removed in MS Edge as they could be used to target the browser and break compatibility with sites that were expecting old IE behaviour (the properties are very old). Unfortunately there are no good standard properties in CSS to replace these at the moment.
There is a UserVoice suggestion you can vote on to add a method to style scrollbars. We use this as one of the inputs when planning feature priorities in the EdgeHTML engine.
The following worked for me:
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars
I'm working on this project: http://maithrigoonetilleke.com/
And I need some help fixing the scroll bar of the inner pages to be of the same colour in Chrome, Internet Explorer & Firefox.
but it only works on Chrome. In IE and Firefox it is same as default.
I used a custom css code to make the scrollbar look nicer:
CSS
::-webkit-scrollbar {
width: 12px;
background-color: #3c3c3c;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #000;
}
::-webkit-scrollbar-thumb {
border-radius: 0px;
background-color: #606060;
}
Check the link: http://maithrigoonetilleke.com/books/
CSS scrollbar customization is supported by Webkit-based browsers only. So, to customize scrollbars crossbrowser-way you should use javascript-based solution. There are lots of CSS customizable scrollbar plugins you can find in internet: jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar and others. Try jQuery Scrollbar - this one is fully CSS customizable.
I work on a PC so I hadn't realized I was having this problem. Basically, the rounded corners of my container are not displaying in safari, which is strange because I believe the code I used is compatible with Safari. Any input on this would be greatly appreciated.
Here's my container code:
.container {
clear: both;
margin: 20px auto;
width: 940px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/* overflow-x: hidden; */
*zoom: 1;
}
And then my website is basically wrapped in it:
<div class="container">
WEBSITE
</div>
If you have safari, you can view the issue here.
Your problem is that you've got all the prefixed versions of border-radius, but you haven't got the standard un-prefixed version.
You need to add border-radius: 10px;
Yes, Safari is a Webkit browser, so you might think that -webkit-border-radius should work, but the prefixed version is only supposed to exist while the style is experimental. Once it's become a standard, the browsers are supposed to drop support for the prefixed version and only support the standard version.
border-radius became a standard a long time ago, so all browsers should now support the standard version without a prefix. Some browsers do still support their prefix, but they could drop support in any version.
The same applies to box-shadow, and to every other CSS style -- if you are declaring prefixes, you should also always declare the un-prefixed standard version too.
Hope that helps.
Consider the answer provided by #Spudley ,in case if it doesn't solve the problem
Few things you can do:
1)Check your Safari Version
As #Adrift pointed out in the comments ,it might be a compatibility problem.
2)A non-visible character might be present in your css code
This problem occurs often thus making the programmers struggling for hours to find the problem.Try writing the code into another file or use some good editor which shows the hidden characters.
My css is not working with Iexplorer, can someone explain me why this isn't working?
The HTML
<div class="myBox"> Content <div>
The CSS:
.myBox {
margin: 0.0in auto;
color: #FFF;
width: 450px;
height:450px;
padding: 12px;
text-align: left;
background-color: #444141;
border: 0px solid #4e4b4b;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.myBox h2 {
color:#f57f20
}
IE doesn't support CSS3 rounded corners, I'd suggest a fallback to using PNG images.
Just use the CSS3 property border-radius. Sure, it probably won't work until IE9, which goes back to the age old question...
Do web sites need to look exactly the same in every browser?
You should use htc file to curve corners in IE6+. In IE9 the CSS3 declarations will work. How to use htc file to curve corners you can find here http://starikovs.com/2010/08/24/css3-rounded-corners/.
Because IE does not support custom Mozilla or WebKit properties.
An option could have been using CSS3 browser-independent round corner properties, but it is not yet widely implemented across major browsers. So for now you'll have to stick to images if you want cross-browser compatibility or function with JavaScript disabled.