Question

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

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

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

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

Answer 1

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

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

    to {
        position: fixed;
    }
}

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

1 个答案: