Prekreslenie problému pri zmene šírky webkit-scrollbar na hover - javascript, html, css, css3

Snažím sa zmeniť šírku posúvačavznášať sa. Môžem zmeniť farbu pozadia a iné vlastnosti CSS, ale šírka je rozrušená. Ak kliknem pravým tlačidlom na prvok a zobrazím okno na ladenie - objaví sa prekreslenie a vidím širšiu posuvnú lištu. Existuje riešenie, ktoré rieši iba tento problém?

http://jsfiddle.net/7j2H2/17/

div {
width: 300px;
height: 300px;
overflow-y: scroll;
background-color: blue;
}

/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
height: 4px;
width: 4px;
}

div:hover::-webkit-scrollbar,
div:hover::-webkit-scrollbar-button,
div:hover::-webkit-scrollbar-track,
div:hover::-webkit-scrollbar-track-piece,
div:hover::-webkit-scrollbar-thumb,
div:hover::-webkit-scrollbar-corner {
width: 40px !important;
background-color: red !important;
}

::-webkit-scrollbar-track-piece {
background-color: #efefef;
}

::-webkit-scrollbar-thumb:vertical {
background-color: #666;
}

odpovede:

Stačí zmeniť udalosť na "vznášanie sa posúvača"

::-webkit-scrollbar-thumb:hover

DEMO