<input type="range"> gets clipped in Safari

[bluedusk]

please see:
https://stackoverflow.com/questions/31101398/bootstrap-conflict-with-input-range-in-safari

[kkirsche]

@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">

[cvrebert]

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/

[cvrebert]

display: block; width: 100%; (without Bootstrap; both properties are necessary) is sufficient to trigger the bug:
http://jsfiddle.net/cvrebert/0uzk6f4c/

[cvrebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=146896

[cvrebert]

Filed Apple Safari Radar: http://openradar.appspot.com/21787807

[cvrebert]

The WebKit/Safari bug has now been fixed: https://bugs.webkit.org/show_bug.cgi?id=146896#c11

[cvrebert]

@mdo Do we wish to take any action here?

[mdo]

Not likely given the bug fixes, but perhaps we can revisit in v4.

[cvrebert]

Closing then.