const dr = document.querySelector(".duplicate-row");

for (let i = 0; i < 200; i++) {
  dr.after(dr.cloneNode(true));
}

.table-header {
  position: sticky;
  top: 0;
  background: #ddd;
}
td {
  padding: 16px;
}
table {
  border: 1px solid #ccc;
}

<p>In <strong>Firefox</strong>, if you place your mouse cursor over the <strong>Hover cursor over me</strong> text in the table area and use your mousewheel to scroll, the sticky <strong>Column Header</strong> will flicker and sometimes not render.</p>

<p>If you move your cursor out of the table, or hover it on the <strong>Column Header</strong> and then try to use the mouse wheel to scroll then the flickering appears to go away.</p>

<p>If you use the vertical scroll bar to scroll the issue is less apparent.</p>
<table>
  <tbody>
    <tr class="table-header">
      <td>
        <h1>COLUMN HEADER</h1>
      </td>
    </tr>
    <tr class="duplicate-row">
      <td>Hover cursor over me</td>
    </tr>
  </tbody>
</table>