Safari - position:fixed不会使元素脱离文档流

Question

我发现了一种与定位相关的奇怪Safari行为。

例如：

#parent {
  position:fixed;
  overflow-x: hidden;
  height:30px;
}
#toolTip-child {
  position:fixed
  display:block;
  top:10px;
  left:16px;
  height:100px;
}

据我所知，当位置设置为fixed（或absolute，在这种情况下无关紧要）时，元素应该从范围中分离出来，并以某种方式独立渲染。在我们用于测试开发站点的每个浏览器中，它都像我上面说的那样工作，除了Safari。

在Safari中，如果父元素具有“fixed”定位和“overflow-x”属性，则无论我如何定位子元素（“position：fixed”，“top”，“left” ->无关紧要），如果它超出父元素，它就不可见。

我遇到了困难，不知道如何强制Safari合作。如果你们中的任何人有任何想法，将不胜感激。

- sznowicki

---

你能提供一个完整的例子吗？ - ralph.m

抱歉这么晚才回复，我无法在fiddle上重新制作。半个小时后我发现，“position”上有一个错误。 - sznowicki

为了给你一些背景线索。#toolTip-child元素在单元格上点击动作后切换。它向用户显示一些操作菜单。单元格的父级是表头，固定定位以获得“冻结表头”解决方案。我不太喜欢这种CSS hack，但现在我必须接受它。 - sznowicki

“Safari不是和Chrome使用同一个引擎吗？” “不是了。Safari使用的是WebKit，而Chrome则运行在Blink上——我认为Blink最初是从WebKit分支出来的。” - ralph.m

不妨尝试将隐藏元素的位置放在屏幕之外，然后在单击时将其移回屏幕上，而不是使用“overflow：hidden”。 - ralph.m

Answer 1

好的，这并不是一个答案，因为它似乎是一个 bug，但我有一个解决方法。

问题在于，当我们对一个元素应用 overflow-x:hidden 时，在 Safari 中它也会被设置为 overflow-y:hidden。我不知道为什么，但它似乎是一个普通的 bug。

我想出来的解决方法非常简单。

子元素在触发器上点击后从 hidden 切换到 visible 状态。我只需添加两行代码。一行调整父元素的 y 维度大小。第二行在子元素隐藏时将其大小调整回来。

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

- sznowicki