search

rstacruz / nprogress

For slim progress bars like on YouTube, Medium, etc
http://ricostacruz.com/nprogress
MIT License
26.03k stars 1.81k forks source link

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

Open alancwoo opened 10 years ago

alancwoo commented 10 years ago

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 commented 10 years ago

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

artavenue commented 10 years ago

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 commented 10 years ago

Fixed it with:

#nprogress {
  position: relative;
  z-index: 9999999;
}
dmackerman commented 10 years ago

Thanks for the fix @haihappen :+1:

mjau-mjau commented 9 years ago

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.