固定位置在 safari 上被切断

问题描述

我有一个固定位置的工具提示，适用于除 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); -webkit-transform: translate3d(0,0); z-index:9999 !important) 但它们都不起作用。

任何帮助将不胜感激！谢谢！

解决方法

在不知道您的 html 代码的情况下，我推测父容器和工具提示元素不在同一级别，因此即使您增加 z-index 值也不会改变。将元素放在可以工作的同一级别。像这样

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

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

我敢打赌，您可能需要在 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 属性，但我们会看到。祝你找到解决方案好运，希望我有所帮助！

css-position fixed html safari