CSS-设置固定(或绝对）位置时转换宽度中断

CSS - Transition width broken when setting a fixed (or absolute) position

本文关键字：位置转换中断设置 CSS- 更新时间：2023-09-26

我有一个元素在我的头上充当border-bottom。当用户向下滚动时，此边框的宽度应达到100%。

我对这种行为严加管束。

现在，当用户向下滚动时，我还需要将我的标题固定在顶部。所以我添加了一个position: fixed属性。

但这打破了我在firefox33上的转换。不过它仍然可以在Chrome上运行。

有办法解决这个问题吗？

这似乎是Firefox中的一个已知错误，在更改position属性时，转换无法正确设置动画。它似乎被安排在Fx 34。

在该bug引用的一个示例中，请注意header2以position: fixed开头，因此其宽度按预期设置动画。

我认为你的选择是允许Firefox<33，或者使用jQuery/JavaScript制作动画。