固定位置在 safari 上被切断

Question

我有一个固定位置的工具提示，适用于除 Safari 以外的所有浏览器。在 safari 中，工具提示被具有 overflow: scroll

属性的父容器截断

关于如何解决这个问题的任何想法？

这是它应该是什么样子的屏幕截图：

这是它在 Safari 中的样子：

这些是工具提示的属性：

        .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;
          }
        }

这是家长的观点：

.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;
  }
}

我尝试了几种不同的修复方法，例如： -webkit-transform: translateZ(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); z-index:9999 !important) 和 none 有效。

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

检查父元素的属性和重叠元素的属性。其中一些有一个位置或一个 z 索引值阻止它从你想要的行为

Answer 2

在不知道您的 html 代码的情况下，我推测父容器和工具提示元素不在同一级别，因此即使您增加 z-index 值它也不会改变。将元素放置在与 work.Something 相同的级别

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

Answer 3

我敢打赌，也许您需要在 Safari 中将 position: fixed 和 overflow 标签拆分成两个嵌套的 div 类标签？我知道这可能有点烦人和不方便，但那样的话 - 我不认为 z-index 会被封锁...

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;
  ...
}

我没想到 overflow: scroll 会影响任何 z-index 属性，但我们拭目以待。祝你找到解决方案，希望我有所帮助！

固定位置在 safari 上被切断

Position fixed being cut off on safari

html

css

safari

fixed

css-position