El problema de redibujo al cambiar el ancho de la barra de desplazamiento de webkit en el hover - javascript, html, css, css3

Estoy tratando de cambiar el ancho de una barra de desplazamiento enflotar. Puedo cambiar el color de fondo y otras propiedades de CSS, pero el ancho es muy delicado. Si hago clic con el botón derecho en el elemento y veo la ventana de depuración, se produce un redibujado y veo una barra de desplazamiento más ancha. ¿Hay una solución solo para css para solucionar este problema?

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;
}

Respuestas

Solo cambia el evento a la "barra flotante"

::-webkit-scrollbar-thumb:hover

MANIFESTACIÓN