My HTML input type=range element is styled perfectly in Chrome, but it's a disaster in Safari. The track ball disappears or only partially renders when moved, and it seems to take forever to load. Any idea what could be causing this strange behavior?
CSS styles for the track and ball (with minor changes in media queries):
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;
}
Check out the current state of things on jsfiddle here: http://jsfiddle.net/agentemi1y/srp7r3ue/1/