Position fixed being cut off on safari

Question

I have a fixed position tooltip that works in all browsers except Safari. In safari, the tooltip is being cut off by the parent's container which has properties of overflow: scroll

Any ideas on how I can fix this?

This is the screenshot of how it's supposed to look like:

This is how it looks on safari:

These are the properties for the tooltip:

        .announcement {
          position: fixed;
          width: 3.1rem;
          height: 3.1rem;
          background-image: url("./../assets/icons/announcement-alert-right.svg");
          background-size: cover;
          margin: 0 0 0 -2.8rem;
          z-index: 1;

          &:hover {
            margin: -3.6rem 0 0 -14.8rem;
            width: 15.3rem;
            height: 6.7rem;
            background-image: url("./../assets/icons/announcement-profile.svg");
          }

          @media screen and (max-width: $desktop) {
            display: none;
          }
        }

This is the parent's perspective:

.profile {
  position: fixed;
  z-index: map-get($zindex, sidebar);
  right: 0;
  width: 15%;
  height: 100%;
  transition: 0.5s;
  padding: 3rem;
  box-shadow: 0 1.5rem 3rem $color-shadow;
  background-color: $color-white;  
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

I've tried several different fixes such as: -webkit-transform: translateZ(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); z-index:9999 !important) and none of them works.

Any help would be much appreciated! Thanks!

Jimjams

Try using z-index: 1000 on the element. – Emersen

Can you show the properties of the parent too? – Chelyuskin

@Emersen z-index: 1000 doesn't work, adding the important tag doesn't work too – Jimjams

@AHaworth I've added the properties of the parent – Jimjams

Did you just try overflow: visible on parent, just to see the result? – Colleague

@ClarissaAudrey without html code its difficult to find the problem – Arvie

Answer 1

Without knowing your html code i speculated that the parent container and the tool tip element are not at the same level so even if you increase z-index value it won't change. Place the element at the same level that would work.Something like this

<parent-container>
//parent content
</parent-container>
<tooltip-element>
//tooltip-content
</tooltip-element> //same level

Arvie

Answer 2

Check the parents' properties and the overlapping element's properties. Some of them has a position or a z index value that is blocking it from your desired behavior

Tattoo

I don't think that's the case. I've added a z index value bigger than the parent's value and it does nothing. I've added the parent's properties for you to see – Jimjams

Answer 3

I bet is that maybe you will need to split up the position: fixed and overflow tags across two nested div classes in Safari? I know this could be a bit annoying and inconvenient, but then that way - I don't think that the z-index will be blocked off...

HTML:

<div class="wrapper1">
  <div class="wrapper2">
    <div class="inner">
       /* Stuff inside here */  
    </div>
  </div>
</div>

CSS:

.wrapper {
  ...
  position: fixed;
  ...
}

.wrapper2 {
  ...
  overflow: hidden;
  position: absolute;
  ...
}

I wouldn't have thought that the overflow: scroll would affect any of the z-index properties but we'll see. Good luck on finding a solution, hopefully I've somewhat helped!

Moresque