Bug 171663 – REGRESSION: Input and table-caption inside a table make the table automatically grow on input interaction

• Status: NEW
• Component: Layout and Rendering

[Tim]

Created attachment 309051 [details]
Screenshot of the bug reproduced in JSBin

Assuming the following structure (with in between brackets the display properties of the element)

```
- div (table)
-- div (table-caption)
-- div (table-cell)
--- input
```

When:
- The input field is positioned absolutely.
- Any parent of the input field (which is not the main table element) is positioned relatively.

The table-caption div somehow moves down a few pixels anytime you:
- focus and blur the input field
- enter and remove a character in the input field

Reproduced in: http://jsbin.com/qovolelino/1/edit?html,css,output

This behaviour is not reproducible on Safari version 9.x

[Tim]

The exact same thing is reproducible by rebuilding the structure with proper table elements:

<table style="width: 100%;">
  <caption>Table caption</caption>
  <tr>
    <td style="position: relative;">
      <input style="position: absolute;" type="text">
    </td>
  </tr>
</table>

http://jsbin.com/coviyolage/edit?html,css,output

[Radar WebKit Bug Importer]

<rdar://problem/32040965>

[iyuuya]

I'm sorry, my English is not good.

The same problem was found on Safari 11.0.2.

When:
- change text of DOM positioned absolutely

https://jsfiddle.net/bv2k1dk0/