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

Closed
bluedusk opened this Issue Jul 12, 2015 · 9 comments

4 participants

@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 cvrebert added the css label Jul 12, 2015
@cvrebert cvrebert changed the title from Bootstrap conflict with input=range in Safari to <input type="range"> gets clipped in Safari Jul 12, 2015
@cvrebert cvrebert added the confirmed label Jul 13, 2015
@cvrebert
Bootstrap member

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
Bootstrap member

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

@cvrebert
Bootstrap member
@cvrebert
Bootstrap member

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

@cvrebert cvrebert added a commit that referenced this issue Jul 13, 2015
@cvrebert cvrebert Add Wall of Browser Bugs entry for #16809
[skip sauce]
4f83f3f
@mdo mdo referenced this issue Jul 13, 2015
Closed

v3.3.6 ship list #16644

@cvrebert
Bootstrap member

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

@cvrebert cvrebert added a commit that referenced this issue Jul 18, 2015
@cvrebert cvrebert http://wkbug.com/146896 has been fixed; rm it from the Wall of Browse…
…r Bugs

Refs #16813, #16809
[skip sauce]
ac6477f
@cvrebert
Bootstrap member

@mdo Do we wish to take any action here?

@mdo
Bootstrap member
mdo commented Jul 18, 2015

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

@cvrebert
Bootstrap member

Closing then.

@cvrebert cvrebert closed this Jul 18, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment