incorrect display of input radio when scrolling page

Question

I have layout with two columns. Each column have "radiogroup" - a table with input[type='radio'] on every tr The problem is that some inputs display incorrectly when scrolling the page. Top or bottom of some inputs just dissapear. Look at the screenshot - http://img.skitch.com/20100716-8tjsyy877ms1ar6i5i9fp9qykr.png . The problem appears in latest dev build of Chrome and Opera. Don't know about other browsers. So, any ideas?

this is html:

<div id="form1">
        <div class="form-columns-wrap">
            <div class="form-column-left">
            <table class="radiogroup">
                <tr>
                    <td><input type="radio"></td>
                    <td>option 1</td>
                    <td rowspan="2"><img src="info.png"></td>
                </tr>
                <tr>
                    <td><input type="radio"></td>
                    <td>option 2</td>
                </tr>
            </table>
            </div>

            <div class="form-column-right">
            <table class="radiogroup">
                <tr>
                    <td><input type="radio"></td>
                    <td>option 1</td>
                    <td rowspan="2"><img src="info.png"></td>
                </tr>
                <tr>
                    <td><input type="radio"></td>
                    <td>option 2</td>
                </tr>
            </table>            
            </div>

        </div>
<div class="clear"></div>   
</div>

and this is css:

div.form-columns-wrap
{
width: 100%;
}

div.form-column-left
{
float:left;
width:47%;
}

div.form-column-right
{
float:right;
width:47%;
}

table.radiogroup
{
padding-top: 3px;
padding-bottom: 3px;
border-bottom: 1px dashed;
border-bottom-color: #e9e9e9;
}

html, body
{
width:1000px;
font-size: 95%;
margin:0 auto; 
margin-top: 5px;
font-family:  Tahoma, Arial, sans-serif; 
}

.clear {
clear:both;
font-size:0;
overflow:hidden; 
}