I recently finished developing a website and I have customized the main vertical scrollbar.
Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox.
Does anyone have any suggestions on how to troubleshoot this problem?
CSS CODE
::-webkit-scrollbar {
width: 10px;
height: 6px;
background: #FFF url(images/bg-blog-repeat.png) 0 0 repeat;
}
::-webkit-scrollbar-thumb {
border: solid 0 transparent;
border-right-width: 4px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 9px 5px;
-webkit-border-bottom-right-radius: 9px 5px;
-webkit-box-shadow: inset 0 0 0 1px rgb(79,79,79), inset 0 0 0 6px rgb(102,102,102);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 0 1px rgb(90,90,90), inset 0 0 0 6px rgb(110,110,110);
}
::-webkit-scrollbar-thumb:horizontal {
border-right-width: 0;
border-bottom-width: 2px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px 9px;
-webkit-border-bottom-left-radius: 5px 9px;
}
::-webkit-scrollbar-corner {
background: #FFF url(images/bg-blog-repeat.png) 0 0 no-repeat;
}
body ::-webkit-scrollbar {
background: transparent none;
}
Thank you for your assistance.