悬停时更改webkit滚动条宽度时出现重绘问题

我正在尝试更改悬停时滚动条的宽度。我可以更改背景颜色和其他CSS属性，但宽度很繁琐。如果我右键单击该元素并查看调试窗口，则会重新绘制，并看到更宽的滚动条。是否有一个仅css的解决方案来解决此问题？

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