<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 - <input type="radio"> button overflows its bounds when it has margin-left:0;"
href="https://bugs.webkit.org/show_bug.cgi?id=155577">155577</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td><input type="radio"> button overflows its bounds when it has margin-left:0;
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</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>Forms
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@chrisrebert.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=274261" name="attach_274261" title="Screenshot of CodePen testcase in Safari">attachment 274261</a> <a href="attachment.cgi?id=274261&action=edit" title="Screenshot of CodePen testcase in Safari">[details]</a></span>
Screenshot of CodePen testcase in Safari
Original Bootstrap bug: <a href="https://github.com/twbs/bootstrap/issues/16756">https://github.com/twbs/bootstrap/issues/16756</a>
Normalize.css bug: <a href="https://github.com/necolas/normalize.css/issues/462">https://github.com/necolas/normalize.css/issues/462</a>
Corresponding Chrome bug: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=396726">https://bugs.chromium.org/p/chromium/issues/detail?id=396726</a>
Possibly related to <a class="bz_bug_link
bz_status_NEW "
title="NEW - Radio buttons are using the wrong sizes and margins"
href="show_bug.cgi?id=131503">bug 131503</a>?
Safari: Version 9.0.3 (11601.4.4)
Platform: OS X (this bug doesn't seem to occur on iOS)
Summary:
Radio buttons shouldn't require any left margin in order to be fully visible.
The current behavior is unintuitive and makes it trickier to tweak the alignment of radio buttons reliably across different browsers.
To reproduce:
1. Open <a href="http://codepen.io/mattdrose/pen/mKanB">http://codepen.io/mattdrose/pen/mKanB</a> in OS X Safari.
Actual result:
The 1st radio button's left side is partially clipped off.
Expected result:
The 1st radio button's circle should be fully visible.
Results in other browsers, for comparison:
* Firefox on OS X: Displays correctly, with no clipping.
* Microsoft Edge on Win10: Displays correctly, with no clipping.
* Chrome on OS X: Same as Safari. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=396726">https://bugs.chromium.org/p/chromium/issues/detail?id=396726</a></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>