<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 - Checkbox and radio controls jumps and flickers on interaction"
href="https://bugs.webkit.org/show_bug.cgi?id=147187">147187</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Checkbox and radio controls jumps and flickers on interaction
</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
</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>Forms
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>jonasw@roxen.com
</td>
</tr></table>
<p>
<div>
<pre>Tested in El Capitan 10.11 beta 4, Safari Version 9.0 (11601.1.39.0.2) on an iMac (27-in, late 2009, ATI Radeon HD 4850 512 MB).
Open Develop > Show Snippet Editor and paste the following code:
<div>
Jumps left/right:
<input type="checkbox" style="width: 20px">
<input type="radio" style="width: 20px">
</div>
<div>
Jumps up/down:
<input type="checkbox" style="height: 20px">
<input type="radio" style="height: 20px">
</div>
Now try to click on the resulting controls and watch how they jump in different directions while the mouse button is pressed. They also jump back to the original position within a second or so even if mouse isn't moved or the button released.
Related observations:
- There is visible repaint flicker on clicks even if the style attributes are removed.
- The inset shadow in the square/circle of the controls is visible while the mouse button is pressed even when the cursor leaves the control boundary (unlike native checkbox/radio controls in OS X).</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>