Header 闪烁不存在

Question

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

给 header 一个 min-height: 0 或 webkit-transform: translateZ(0) 并没有多大帮助。

 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>