<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - `display: block; width: 100%` makes <input type="range">'s thumb get clipped"
href="https://bugs.webkit.org/show_bug.cgi?id=146896">146896</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>`display: block; width: 100%` makes <input type="range">'s thumb get clipped
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh Intel
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@rebertia.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=256684" name="attach_256684" title="Screenshot of the rendering error">attachment 256684</a> <a href="attachment.cgi?id=256684&action=edit" title="Screenshot of the rendering error">[details]</a></span>
Screenshot of the rendering error
Original Bootstrap issue: <a href="https://github.com/twbs/bootstrap/issues/16809">https://github.com/twbs/bootstrap/issues/16809</a>
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".
Test case: <a href="http://jsfiddle.net/cvrebert/0uzk6f4c/">http://jsfiddle.net/cvrebert/0uzk6f4c/</a>
Steps to reproduce:
1. Open <a href="http://jsfiddle.net/cvrebert/0uzk6f4c/">http://jsfiddle.net/cvrebert/0uzk6f4c/</a> 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 behavior:
The range input's "thumb" should be drawn normally.
(In Safari's current UI, it should be a white/gray circle.)
Actual behavior:
The range input's "thumb" has its left or right edge clipped off.
See attached screenshot.
--------
Contents of the testcase (in the event that JS Fiddle goes offline):
CSS:
input[type="range"] {
display: block;
width: 100%;
}
HTML:
<input type="range" /></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>