Blurry Nav Bar when scrolling

Question

I successfully fixed my nav bar on the top of my webpage when scrolling, but somehow it get's blurry when passing over certain divs (mostly sliders). Could someone give me a hand please?

http://www.clinicajardinsbenfica.pt/new.html

Thanks in advance!

edit: it seems the issue is only with chrome. no idea why.

edit2: here's a videoscreenshot with the issue http://www.screenr.com/mVEH

Answer 1

If you are talking about that broken background coming below that dotted border then add below given CSS to fix that

#nav li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: none !important;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    float: left;
    font-family: GothamHTF-Medium;
    font-size: 17px;
    padding: 22px 0.85em 16px;
}

Is it what you are looking for?

Answer 2

Chrome has some problems rendering fixed elements.

You should start adding the follwing to your fixed element(s):

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0) scale(1.0, 1.0);

translateZ(0) can be used to fix numerous of Chrome Bugs.

If that doesn't work, make sure there are no elements inside your fixed element's container which have an opacity of 0 . If so make sure they also have display:none;

If you still don't get a result, make sure you've the following:

html,body { 
    height:100%;
    overflow:auto
}

There is still an open bug issue at chromium .

Answer 3

Add this css to your nav stylings.

#nav{
 -webkit-backface-visibility: hidden;
}