1

I've styled an HTML input type=range element, and it's working the way I want in Chrome, but it's rendering horribly in Safari. The track ball doesn't show up or partially renders when you move it. It also seems like it takes forever to load. Does anyone know what's going on here?

CSS styles on the track and ball (minus 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;
}

And a jsfiddle of the whole thing as it currently stands: http://jsfiddle.net/agentemi1y/srp7r3ue/1/

agentem
  • 651
  • 2
  • 8
  • 17

1 Answers1

1

For this sort of webkit render glitches, I've had luck forcing a browser redraw as referenced in this answer. To wit:

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

Fiddle with fix.

Community
  • 1
  • 1
event_jr
  • 17,467
  • 4
  • 47
  • 62