溢出:自动在Firefox中隐藏固定元素

时间:2018-11-07 12:33:34

标签: html css firefox flexbox

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

下面是一个复制行为的codepen:https://codepen.io/anon/pen/VVvoBZ

似乎Firefox在结合使用display: flexoverflow: auto时遇到问题,因为它在使用display: box时显示了元素。

有人知道这个问题是我还是Firefox的错误吗?

1 个答案:

答案 0 :(得分:0)

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

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

    to {
        position: fixed;
    }
}