Help needed. css animation not working in Firefox

Hope somebody can figure this out. I am starting out with bootstrap 3 and created a simple navigation bar with the affix plugin. When scrolling down it sticks to the top. At this moment the navbar brand image will become visible.

In Chrome you can see animation, but in Firefox it does not. It is probably a some setting i’m overlooking somewhere.

Here’s a sample:

Curious, I’m on a chromebook so I can’t test…but move your standard transition for the navbar AFTER all the vendor prefixes (so make -o- and -moz- come before the regular transition)…

Hi thanks, i tried it but it did not make a difference.

Using Chrome here and I don’t see any animation whatsoever… (chrome version 37.0.2062.94 running under Windows 7)

Make the window smaller, but keep the navigation visible (all options, not mobile). then scroll down a bit so navigation sticks. It should move to the right a bit (animated) making space for the smaller brand image which should become visible (animated).

Still not working for me. I tried to change the size of the screen until I see a hamburguer menu… but never seen the brand image and there’s no animation… just small jumps for me

if you see hamburger menu you’re too small. here’s a video of the animation in chrome. try in FF and there will be no smooth animation/transition.

Can’t watch till I get home (many urls are closed in my office). I do know that if I get the hamburguer menu, I went too far… but I tried several times and there’s no animation for me.

Having said this, it is possible that the problem is that I’m at the office. Some things don’t work the same when I’m here.

I’ll give it another try when I get home

Chrome does work for me (both Chromebook and office)

It’s a bit of an awkward setup at the moment (bit surprised Chrome is even working)

You are having it visibility none’d until you scroll down, adn then upon Javascript setting the class to .affix (instead of affix-top) you show that small pink image. My Firefox at work is making me upgrade/reboot until I can use it so I wish I could be of more help. I did try originally but it’s just a bit awkward setup at the moment.

Ooops, misread the instructions there with the affix/affix-top class. shouldn’t matter for the transition though i guess, as it works in chrome. will fix that later.

Hi, I changed some html/css maybe it is more clear now. It still does not work in Firefox.
I needed to have affix-top because if i make it class=“affix” at the beginning, the Bootstrap plugin replaces it with affix-top on load which causes some flickering.

So if anybody is interested i have put the source here temp.


It’s working in my Firefox developer edition so I would assume its a bug in Firefox that will likely be fixed in an update soon as I can’t believe they have a separate rendering for the Firefox developer edition.

Firefox doesn’t seem to like doing the animation when the element suddenly becomes position:fixed. If you set the element to position:fixed to start with then it animates correctly (but of course is not a solution because it will be in the wrong position).

Looks like the bug has been fixed in FF34.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.