Bug 171663 - REGRESSION: Input and table-caption inside a table make the table automatically grow on input interaction
Summary: REGRESSION: Input and table-caption inside a table make the table automatical...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 10
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL: http://jsbin.com/qovolelino/1/edit?ht...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-05-04 08:53 PDT by Tim
Modified: 2017-12-06 21:41 PST (History)
7 users (show)

See Also:


Attachments
Screenshot of the bug reproduced in JSBin (328.95 KB, image/png)
2017-05-04 08:53 PDT, Tim
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tim 2017-05-04 08:53:34 PDT
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
Comment 1 Tim 2017-05-04 09:12:37 PDT
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
Comment 2 Radar WebKit Bug Importer 2017-05-07 17:49:31 PDT
<rdar://problem/32040965>
Comment 3 iyuuya 2017-12-06 21:41:54 PST
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/