z-index issue on progress bar fade out (with fixed-position object on the top of the page?)

[alancwoo]

I have a fixed-position box with a background colour that is fixed to the top of the page. When the progress bar fades out, for some reason it seems to quickly flash behind the top-box for a split second.

http://jsbin.com/AnIMeWu/3/

Is this an issue with the fadeout animation? Is there a way to remedy this?

[artavenue]

Did you already find a solution for your problem? I have exactly the same.

[artavenue]

i found a solution for this:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

the position element is important for the order of the elements. So, check if your nprogress class has a position.

[ream88]

Fixed it with:

#nprogress {
  position: relative;
  z-index: 9999999;
}

[dmackerman]

Thanks for the fix @Haihappen 👍

[mjau-mjau]

thanks @Haihappen for the fix.

I had a similar issue, spent hours trying to figure out why NProgress did not fade out (opacity) after applying NProgress.done(). I am not quite sure why it happens, but I assume it must be some specific style applied to the body tag that breaks the fade out somehow. It is as if opacity:0 gets applied to #nprogress before the transition property so there is no transition.