CODEWITHSUNDEEP
javascriptjquerycss
Goodzilla
Goodzilla

Reputation: 1483

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

I have an element that acts as a border-bottom on my header. When the user scrolls down, this border should reach 100% width.

I've set up a working fiddle with this behaviour.

Now, I also need my header to be fixed at the top when the user scrolls down. So I've added a position: fixed property.

But that breaks my transition on firefox 33. It still works on Chrome though.

Is there a way to fix this ?

Upvotes: 2

Views: 322

Answers (1)

Palpatim
Palpatim

Reputation: 9272

It looks like this is a known bug in Firefox where transitions don't properly animate when changing the position attribute. It appears to be scheduled for Fx 34.

In an example, referenced from that bug, note that header2 starts as position: fixed, so its width animates as expected.

I'd think your options are to allow the bug for Firefox <=33, or animate using jQuery/JavaScript.

Upvotes: 1

Related Questions