Элемент диапазона диапазона HTML5 плохо в Safari

Question

Я разработал элемент ввода HTML = элемент диапазона, и он работает так, как я хочу, в Chrome, но он ужасно отрисовывается в Safari. Шарик трека не отображается или частично отображается, когда вы его перемещаете. Также кажется, что навсегда требуется загрузка. Кто-нибудь знает, что здесь происходит?

стили CSS на трассу и шаровыми (минус незначительных изменениях в запросах СМИ:

input[type=range] { 
    -webkit-appearance:none; 
    -webkit-flex-basis:100%; 
} 

input[type=range]::-webkit-slider-runnable-track { 
    width:10rem; 
    height: 1rem; 
    background: #fff; 
    border: 2px solid orange; 
    border-radius: 10px; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    height: 3rem; 
    width: 3rem; 
    border-radius: 50%; 
    background: orange; 
    margin-top: -1.2rem; 
    border:2px solid #fff; 
    cursor: pointer; 
} 

input[type=range]:focus { 
    outline: none; 
} 

И jsfiddle всей вещи, как она в настоящее время составляет: http://jsfiddle.net/agentemi1y/srp7r3ue/1/

Answer 1

Для такого рода WebKit рендеринга глюков я имел счастье принуждая браузер перерисовывать как указано в this answer именно:.

$slider.hide().show(0); 

Fiddle с исправлением.