En Firefox , si coloca el cursor del mouse sobre el texto Pasar el cursor sobre mí en el área de la tabla y usa la rueda del mouse para desplazarse, el encabezado de columna pegajoso parpadeará y, a veces, no se representará.
Darle al encabezado una altura mínima: 0 o webkit-transform: translateZ (0) no ayuda mucho.
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>