Наклон полосы прокрутки Firefox и Chrome

У меня есть этот образец:

ссылка

CODE HTML:

<div class="scroller">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nunc et dolor ullamcorper accumsan. Nullam a justo orci. Quisque convallis enim porttitor arcu porttitor, eget mollis justo pellentesque. Proin et est tincidunt eros vulputate bibendum at eget neque. Nullam pulvinar viverra nisi, et congue sem tempus in. Sed convallis odio et nunc posuere, ac volutpat felis blandit. Sed venenatis sed felis eu vestibulum. Duis ipsum lectus, fringilla nec felis quis, bibendum viverra eros. Phasellus viverra, quam ut rhoncus volutpat, ligula lorem lobortis dui, at vehicula purus augue suscipit est. Maecenas in lorem dictum, vehicula mauris vel, adipiscing lorem. Praesent sed iaculis mi, ut suscipit dolor. Cras eu justo mauris. Aliquam at bibendum sapien. Pellentesque eget auctor lacus, non ultricies elit. Duis vel nisl eget diam sagittis pharetra sed vitae diam.</div>

CODE CSS:

.scroller::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.scroller::-webkit-scrollbar-track {
    background: white;
}
.scroller::-webkit-scrollbar-thumb {
    background: #ddd;
    visibility:hidden;
}
.scroller:hover::-webkit-scrollbar-thumb {
    visibility:visible;
}
.scroller {
    overflow: auto;
    font: 16px/1.5 Arial;
    color: #444;
    border: 1px solid #ddd;
    margin: 20px;
    padding: 20px;
    max-width: 300px;
    height: 200px;
}

Откройте этот пример в Chrome и Firefox, чтобы увидеть различия между ними.

В Chrome он работает хорошо, но в Firefox всегда отображается полоса прокрутки, я просто хочу, :hoverчтобы это произошло.

Как решить эту проблему?

Заранее спасибо!