I tried to make something similar to the new scrollbar of Google using the CSS ::-webkit-scrollbar. In chrome everything works fine, in safari not.
My CSS is
::-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}
I made some screenshot of my problem:
This is chrome and it's ok: https://i.sstatic.net/obGOy.png
This is safari when you try to scroll with the mouse (without clicking on it): https://i.sstatic.net/Br7UX.png
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
(I tried with Safari on a Mac, didn't try with Safari on Windows)
The problem was solved with Safari 6.0
It was just a bug
