title: Redraw issue when changing webkit-scrollbar width on hover
body: <p>I am trying to change the width of a scrollbar on hover. I am able to change background color and other CSS properties, but width is fussy. If I right click the element and view the debug window -- a redraw occurs and I see a wider scrollbar. Is there a css-only solution to fixing this issue? </p>
  
  <p><a href="http://jsfiddle.net/7j2H2/17/" rel="nofollow">http://jsfiddle.net/7j2H2/17/</a></p>
  
  <pre><code>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;
  }
  </code></pre>