Why is position fixed not working when a parent element has position sticky (Firefox)?

Question

I have a table inside of a container div that is vertically scrollable. I use position: sticky on the table header such that the header is always shown when scrolling. Now I want to show a tooltip when hovering over the table header. This tooltip has position: fixed. In Chrome, everything works as expected, but in Firefox, the tooltip is cut off at the top edge of the container div.

Here is a simplified example of my situation:

#container {
  height: 7em;
  overflow: auto;
}

table, td, tr {
  border: 1px solid black;
}

table thead {
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: yellow;
}

#tooltip_anchor:hover #tooltip {
  visibility: visible;
}

#tooltip {
  visibility: hidden;
  background-color: green;
  position: fixed;
  width: 4em;
  top: 20px;
  left: 20px;
  right: auto;
  bottom: auto;
  z-index: 30;
}

<div>
  There is some stuff written here.<br>
  And more stuff.<br>
</div>
<div id="container">
  <table>
    <thead>
      <tr>
        <th><div id="tooltip_anchor">Header<div id="tooltip">Some text within a tooltip</div></div></th>
      </tr>
    </thead>
    <tbody>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
      <tr><td>a row</td></tr>
    </tbody>
  </table>
</div>

If I remove the position: sticky part, it works fine.

Does anybody know why this is happening on Firefox, and more importantly: how do I avoid this?

Answer 1

I don't know whether it's relevant, but if you change from your current theme to one of the built-in themes -- Default, Light, Dark -- does that make any difference?

Your Safe Mode test should rule out a problem with extensions, "hardware acceleration." or a userChrome.css file or userContent.css file.