title: CSS webkit-scrollbar and safari
body: <p>I tried to make something similar to the new scrollbar of Google using the CSS <code>::-webkit-scrollbar</code>. In chrome everything works fine, in safari not.</p>
  
  <p>My CSS is</p>
  
  <pre><code>::-webkit-scrollbar{height:16px;overflow:visible;width:16px}
  ::-webkit-scrollbar-button{height:0;width:0}
  ::-webkit-scrollbar-track{background-clip:padding-box;box-shadow:inset 1px 0 0 #e6e6e6}
  ::-webkit-scrollbar-track:hover{background-color:#f3f3f3;box-shadow:inset 1px 0 0 #e6e6e6}
  ::-webkit-scrollbar-track:active{background-color:#f3f3f3;box-shadow:inset 1px 0 0 #dcdcdc,inset -1px 0 0 #eeeeee}
  ::-webkit-scrollbar-thumb{background-color:#cccccc;background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 0px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 #e6e6e6,inset 0 -1px 0 #eeeeee}
  ::-webkit-scrollbar-thumb:hover{background-color:#999999;box-shadow:inset 1px 1px 1px #c0c0c0}
  ::-webkit-scrollbar-thumb:active{background-color:#808080;box-shadow:inset 1px 1px 3px #a6a6a6}
  </code></pre>
  
  <p>I made some screenshot of my problem:</p>
  
  <p>This is chrome and it's ok: <a href="http://i.imgur.com/wQMP2.png" rel="nofollow">http://i.imgur.com/wQMP2.png</a></p>
  
  <p>This is safari when you try to scroll with the mouse (without clicking on it): <a href="http://i.imgur.com/bFiWj.png" rel="nofollow">http://i.imgur.com/bFiWj.png</a></p>
  
  <p>When you use the scrollbar by clicking on it with mouse the scrollbar works, the problem is only when you use the trackpad or the scroll wheel</p>
  
  <p>(I tried with Safari on a Mac, didn't try with Safari on Windows)</p>