"Runaway" button in Webkit

Question

I've recently came upon a problem with one of our sites in Webkit. There was some old legacy web interface that had a form inside a table and every time a user tried to click a button, it attempted to run away in Chrome and Webkit Opera, for the table constantly expanded on every click.

JSFiddle

<h1>Webkit only</h1>
<table>
    <tr style="line-height: 3em;">
        <td><span>AAA</span></td>
        <td>
            Here goes some text<br/>
            Here goes some more text<br/>            
        </td>
        <td rowspan="2">
            <iframe width="100%" height="100%" border="1" scrolling="yes" src="http://www.google.ru"></iframe>
        </td>
    <tr style="line-height: 3em;">
        <td>&nbsp;</td>
        <td>
            Here goes some more text<br/>
            Here goes some more text<br/>
        </td>
    </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Try to click it &mdash;&gt;</td>
            <td><button onclick="alert('Yes')">Click me!</button></td>
        </tr>
</table>

Answer 1

So the solution was simple: add a fixed width to a table cell containing the iframe. But the bug sure looked funny.

JSFiddle

<h1>Webkit only</h1>
<table>
    <tr style="line-height: 3em;">
        <td><span>AAA</span></td>
        <td>
            Here goes some text<br/>
            Here goes some more text<br/>            
        </td>
        <td rowspan="2" style="height: 200px">
            <iframe width="100%" height="100%" border="1" scrolling="yes" src="http://www.google.ru"></iframe>
        </td>
    <tr style="line-height: 3em;">
        <td>&nbsp;</td>
        <td>
            Here goes some more text<br/>
            Here goes some more text<br/>
        </td>
    </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Try to click it &mdash;&gt;</td>
            <td><button onclick="alert('Yes')">Click me!</button></td>
        </tr>
</table>