html - 溢出 : auto is hiding fixed elements in Firefox

Question

我尝试创建一个模态对话框 ui 控件。在此对话框内部有一个关闭图标和一个按钮栏。这两个元素都应该始终可见并保持在同一位置。所以我用 position:fixed 创建了一个解决方案和 transform: translateZ(0)将这些元素与父元素对齐。对话框的内容可能比视口(viewport)长，所以它应该是可滚动的。为此我添加了 overflow: auto .在 Chrome 上它按预期工作，但在 Firefox 上固定元素不再可见。使用 devtools 检查页面时，元素位于正确的位置，这很奇怪。

这是一个重现该行为的代码笔:https://codepen.io/anon/pen/VVvoBZ

似乎 Firefox 对 display: flex 有问题和 overflow: auto结合使用，因为它在使用 display: box 时显示元素.

有谁知道这个问题是我这边的错误还是 Firefox 中的错误？

Answer 1

这似乎是一个错误，因为如果您将它们的位置更改为任何位置，然后再恢复为固定，它们就会变得可见。这是使用动画来解决您的问题的 hacky 解决方案:

.closeicon,
.buttonbar {
    animation: ffhack 5ms;
}
@keyframes ffhack {
    from {
        position: absolute;
    }

    to {
        position: fixed;
    }
}