<input type="range"> gets clipped in Safari #16809
@bluedusk it's easier if you include all the info here and then include a link to stack overflow so we can easily evaluate your issue
The jsfiddle from stack overflow:
https://jsfiddle.net/bluedusk/w5817wez/1/
His issue:
In Safari, The thumb will be cut when it's been moving around. It seems that Bootstrap conflicts with input of type range.
It works fine in Chrome and Firefox. Any idea about this?
body {
padding: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<input type="range">Confirmed in Safari 8.0.7 (10600.7.12). This appears to be caused by display: block.
Forcing it back to the WebKit default of display: inline-block gets rid of the clipping.
Demo: http://jsfiddle.net/m7qLaLyu/
display: block; width: 100%; (without Bootstrap; both properties are necessary) is sufficient to trigger the bug:
http://jsfiddle.net/cvrebert/0uzk6f4c/
Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=146896
Filed Apple Safari Radar: http://openradar.appspot.com/21787807
The WebKit/Safari bug has now been fixed: https://bugs.webkit.org/show_bug.cgi?id=146896#c11
please see:
https://stackoverflow.com/questions/31101398/bootstrap-conflict-with-input-range-in-safari