Safari - position:fixed不会破坏范围内的元素

szn*_*cki 7 html css safari

我发现了与定位有关的奇怪的Safari行为.

例如:

#parent {
  position:fixed;
  overflow-x: hidden;
  height:30px;
}
#toolTip-child {
  position:fixed
  display:block;
  top:10px;
  left:16px;
  height:100px;
}
Run Code Online (Sandbox Code Playgroud)

据我所知,当position设置为fixed(或绝对值,在这种情况下无关紧要)时,元素应该从作用域中断开并以某种方式独立呈现.

它就像我在上面提到的用于测试我们开发的网站的每个浏览器一样,除了Safari之外.

在Safari中,如果父元素已fixed定位且overflow-x属性.添加,无论我怎样子元素位置(position:fixed,top,left- >没关系),如果它溢出父元素,它是不可见的.

我撞墙,不知道如何强迫Safari合作.

如果您有任何想法,我们将不胜感激.

szn*_*cki 1

好吧,这实际上不是一个答案,因为它看起来像一个错误,但我有一个解决方法。

问题是,当我们应用 overflow-x:hidden到一个元素时,在 Safari 中它也会得到overflow-y:hidden. 我不知道为什么,但这似乎是一个普通的错误。

我发现的解决方法非常简单。

单击触发器后,子元素从 状态切换到hidden状态。visible我只是添加了两行。一是调整父元素在 y 维度上的大小。其次,当子元素隐藏时,将其大小调整回来。

不是最好的解决方案,但对我来说已经足够了。