`display: block; width: 100%` makes <input type="range">'s thumb get clipped

Originator:cvrebert
Number:rdar://21787807 Date Originated:12-Jul-2015
Status:Closed Resolved:17-Jul-2015
Product:Safari Product Version:8.0.7 (10600.7.12)
Classification:UI/Usability Reproducible:Always
 
Summary:
Setting `display: block; width: 100%` on an <input type="range"> causes the left or right part of the "thumb" of the input to get clipped when the user moves the "thumb".

Steps to Reproduce:
1. Open http://jsfiddle.net/cvrebert/0uzk6f4c/ in OS X Safari
2. Click on the range input's "thumb" and keep the mouse button depressed
3. Move the mouse to the left or right sufficiently so that the "thumb" changes its position along the range input's "track"
4. With the mouse button still depressed, move the pointer downward so that you can see the entire "thumb" unobscured

Expected Results:
The range input's "thumb" should be drawn normally.
(In Safari's current UI, it should be a white/gray circle.)

Actual Results:
The range input's "thumb" has its left or right edge clipped off.
See attached screenshot.

Version:
Safari Version 8.0.7 (10600.7.12)
Mac OS X Yosemite 10.10.4 (14E46)

Notes:
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=146896
Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/16809

Configuration:


Attachments:
'range.png' was successfully uploaded.

Comments

Fixed!

The WebKit bug has been fixed as of r186981: https://bugs.webkit.org/show_bug.cgi?id=146896

By cvrebert at July 18, 2015, 6:49 a.m. (reply...)

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!