Fixed Element is Being Affected by overflow:hidden Parent

Question

Run the code snippet and have a look at the tooltip element. It has the position: fixed CSS attribute. It is supposed to be relative to the viewport. Why is it that it is affected by the parent overflow:hidden? (The parent with overflow:hidden is .shirts-list__illustration)

.shirts-list {
  margin: -52px -16px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}

.shirts-list__item {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 25%;
  padding: 52px 16px;
}

.shirts-list__block {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 16px;
  padding-bottom: 16px;
  border: 1px solid #e6e6e6;
  align-items: center;
  position: relative;
}

.shirts-list__title,
.shirts-list__sub-title {
  text-align: center;
}

.shirts-list__title {
  font-family: gibsonsemibold;
  font-size: 15px;
  color: #535353;
  margin: auto 4px;
}

.shirts-list__sub-title {
  color: #8e8e8e;
}

.shirts-list__illustration {
  position: relative;
  padding-top: 8px;
  overflow: hidden;
  z-index: 0;
}

.shirts-list__img {
  width: 100%;
}

.shirts-list__colors {
  position: absolute;
  bottom: 0;
  left: 0;
  -ms-transform: translateY(100%);
  transform: translateY(0);
  padding: 16px;
  width: 85%;
  opacity: 1;
  visibility: visible;
  background-color: #ffffff;
  transition: .2s all ease-out;
}

.shirts-list__colors__title {
  display: block;
  font-size: 14px;
  text-align: center;
  color: #636363;
}

.shirts-list__colors__list {
  margin: 8px -2px -2px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.shirts-list__colors__list__item {
  padding: 2px;
}

.shirts-list__colors__list__block {
  width: 20px;
  height: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  z-index: 1;
}

.shirts-list__action {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}

.sidebar__logo {
  padding: 15px 15px 35px;
}

.color-tooltip-title.z-popover {
  background-color: #535353;
  border: 1px solid #535353;
  border-radius: 4px;
  color: #ffffff;
  padding: 8px;
  min-width: 88px;
  font-size: 13px;
  font-family: gibsonregular;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.color-tooltip-title.z-popover:before {
  border-color: #535353;
  background: #535353;
}

[x-placement="right"]:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  left: -6px;
  z-index: -1;
}

[x-placement="left"]:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  right: -6px;
  z-index: -1;
}

[x-placement="top"]:before {
  content: "";
  position: absolute;
  bottom: -6px;
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  right: calc(50% - 5px);
  z-index: -1;
}

[x-placement="bottom"]:before {
  content: "";
  position: absolute;
  top: -6px;
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  right: calc(50% - 5px);
  z-index: -1;
}

<div class="shirts-list__item product-item" data-id="1" data-group="1">
  <div class="shirts-list__block">
    <div class="shirt-name-flex"><span class="shirts-list__title product-title">Overflow Issue</span>
    </div>
    <div class="shirt-name-spacer"></div>
    <div class="shirts-list__illustration"><img class="shirts-list__img product-image" src="https://picsum.photos/id/1084/536/354" alt="">
      <div class="shirts-list__colors"><span class="shirts-list__colors__title">Lorem Ipsum</span>
        <ul class="shirts-list__colors__list product-colors">
          <li class="shirts-list__colors__list__item">
            <div class="shirts-list__colors__list__block product-color z-popover-hover athletic-heather" style="background-color: rgb(225, 229, 232);">
              <div class="z-popover color-tooltip-title" data-popover-placement="top" style="position: fixed; transform: translate3d(-28px, 9px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="top">athletic heather</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

Let's look at the W3 specification for CSS Transforms:

https://www.w3.org/TR/css-transforms-1/#transform-rendering

Specifically what happens to fixed-position descendants:

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

Example 6

To demostrate the effect of containing block for all descendants on fixed-position descendants, the following code snippets should behave identically:

 
     #container {
       width: 300px;
       height: 200px;
       border: 5px dashed black;
       padding: 5px;
       overflow: scroll;
     }
 
     #bloat {
       height: 1000px;
     }
 
     #child {
       right: 0;
       bottom: 0;
       width: 10%;
       height: 10%;
       background: green;
     }
 

 
     <div id="container" style="transform:translateX(5px);">
       <div id="bloat"></div>
       <div id="child" style="position:fixed;"></div>
     </div>
     versus
 
     <div id="container" style="position:relative; z-index:0; left:5px;">
       <div id="bloat"></div>
       <div id="child" style="position:absolute;"></div>
     </div>
 

---

In your CSS, the parent element .shirts-list__colors has transform: translateY(0). This causes the child fixed elements to position themselves relevant to it and in turn they will be cut off by overflow: hidden on parent elements.

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block :

If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:

A transform or perspective value other than none

Ancestor <div class="shirts-list__colors"> has a transform value of translateY(0).