'Why Firefox limits visibility of absolute-positioned element?

In my project, I have a table screen, that has a navigation bar and a table with sticky header with a button. When a user hovers over this button, tooltip should appear. I want this tooltip to be over the navigation bar. On Chrome it works just fine, but Firefox doesn't show whole tooltip. I made an external div-element for this tooltip. This is a React.js project. Below I put a code for App.js:

import { useState } from "react";
import "./styles.scss";

export default function App() {
  const [text, setText] = useState("");
  const paddingTop = 160;

  return (
    <div>
      <div className="navigation-bar">Navigation Bar</div>
      <div style={{ paddingTop: paddingTop + "px" }}>
        <div>
          <div
            className="table-container"
            style={{
              height: `calc(100vh - ${paddingTop + 10 + 40}px)`
            }}
          >
          <div style={{ position: "relative", zIndex: "101" }}>
            <div className="table-header">
              <div className="table-header-content" style={{ top: "167px" }}>
                <div
                  className="btn"
                  onMouseOver={() => setText("My text example")}
                  onMouseLeave={() => setText("")}
                >
                  Button
                </div>
                <div
                  className="tooltip"
                  style={{
                    display: `${text.length > 0 ? "block" : "none"}`
                  }}
                >
                  {text}
                </div>
              </div>
            </div>

            <div className="scrollable-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  );
}

And styles.scss:

.navigation-bar {
  padding: 10px;
  position: fixed;
  top:0;
  height: 140px;
  width: 100%;
  background: lightblue;
  z-index: 100;
}
.table-container {
  margin-left: 10px;
  margin-right: 10px;
  overflow: auto;
}
.table-header {
  position: sticky;
  top: 0px;
  background-color: #00aeef;
  height: 45px;
}
.table-header-content {
  position: fixed;
  padding-top: 10px;
  left: 10vw;
  right: 10vw;
  height: 25px;
}
.btn {
  padding: 5px;
  text-align: center;
  background-color: white;
}
.tooltip {
  background-color:rgb(243, 159, 159);
  padding: 10px;
  position: absolute;
  bottom: 20px;
  z-index: 101;
}
.scrollable-content {
  min-width: 100%;
  background-color: #aeb6ff;
  height: 2000px;
}

And here is also a link: https://codesandbox.io/s/bold-night-0w4i7h

First I thought, that this tooltip had something to do with z-index, but my attempts with experimenting with z-index didn't solve the problem. The tooltip works fine when I remove the overflow from table-container class, but I need this to scroll only the table. I thought, that when an element is absolute-positioned, it will have the whole screen at disposal. Could someone tell me, why my tooltip doesn't work on Firefox?

My screenshot from Firefox:

My screenshot from Firefox

My screenshot from Chrome:

My screenshot from Chrome

javascripthtmlcssreactjs


Solution 1:[1]

dear @Rahdi i have two solutions for you.

if you need .pt-header-above{display:sticky} then you can change .table-container{overflow: inherit}

OR

if you need .table-container{overflow: hidden;} then you can change .pt-header-above{position: relative} or remove

Solution 2:[2]

After some more research, it seems that this is a default browser behavior and even absolute-positioned children elements are being cut off by their parent with overflow: auto. I guess, that the proper question should be rather: "Why is it even working on Chrome?" In this simple example it is demonstrated:

HTML

<body>

<div id="A">
  <div id="B">A TEXT
    <div id="C">
      <div id="D">
        THIS TEXT IS GETTING DISAPPEARED after setting the overflow:auto on the parent DIV with id="A"
      </div><!-- End of DIV with id="D" -->
    </div><!-- End of DIV with id="C" -->
  </div><!-- End of DIV with id="B" -->
</div><!-- End of DIV with id="A" -->

CSS

body {
  float: right;
}

#A {
  max-height:100px;
  width:200px;
  text-align:right;
  padding: 2em;
  background: yellow;
  overflow: visible;
}

#B {
  position:relative;
  background: red;
}

#C {
  padding: 2em;
  position:absolute;
  left:-200px;
  width:200px;
  background-color:green;
}

#D {
  background: cyan;
}

It is an example from this topic: overflow:auto causes the absolute elements of child DIV disappeared

In my project I've found a workaround by moving the tooltip element to be at the same level as the navigation bar in HTML tree. It can be then positioned on top by setting z-index. Result can be seen here: https://codesandbox.io/s/vigorous-rui-ilbqbl. However, it is not an optimal solution, because I wanted to avoid updating the state of a component that is many levels higher.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Rahdi

Related Questions