Element loses sticky position on hover in MS Edge

The second table header shows another element when is hovered. The problem is that when is hovered it loses the position sticky in MS Edge, and the element stuck when the table is scrolled. It works fine in Chrome and Firefox.

I discovered that it works if the html does not include a DOCTYPE I do not know if is relevant.

td, th {
  padding: 5px 15px;
}

th {
  position: sticky;
  top: 0;
  background: black;
  color: white;
}

th:hover .disp{
  display: inline;
}

.disp {
  display: none;
  position: relative;
}

.container {
  height: 180px;
  overflow: scroll;
}

  <body>
    <div class="container">
      <table id="tableId" height="360">
        <thead>
         <tr>
          <th><input type="checkbox" /></th>
          <th>Size<div class="disp">hi</div></th>
          <th>File</th>
         </tr>
        </thead>
        <tbody>
         <tr>
          <td><input type="checkbox" /></td>
          <td>103Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>12Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>14Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
        </tbody>
       </table>
    </div>
  </body>

Solution

I tested the issue with the MS Edge legacy browser 44.18362.449.0 and I can see the issue there.

I check the code and it looks like position: absolute; in .disp class causing this issue.

I Check the documentation but I did not get any information about this behavior.

If you set position as relative or static than the issue can be solved. You can use it as a workaround for this issue.

Code:

td, th {
  padding: 5px 15px;
}

th {
 position: sticky;
  top: 0;
  background: black;
  color: white;
}

th:hover .disp{
  display: block;
  align-items: center;
}

.disp {
  display: none;
  position: relative;
  right: 8px;
  top: 8px;
}

.container {
  height: 180px;
  overflow: scroll;
}

 <div class="container">
      <table id="tableId" height="360">
        <thead>
         <tr>
          <th><input type="checkbox" /></th>
          <th>Size<div class="disp">hi</div></th>
          <th>File</th>
         </tr>

        </thead>
        <tbody>
         <tr>
          <td><input type="checkbox" /></td>
          <td>103Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>12Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>14Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
         <tr>
          <td><input type="checkbox" /></td>
          <td>16Mb</td>
          <td>Text</td>
         </tr>
        </tbody>
       </table>
    </div>

Output:

Edit:

If you set display: inline-table;. It will help to fix the issue and both elements will display in the same line.

Output: